Clearing Floats in CSS

When you have some elements floating left or floating right, you need a way to clear their floats. A very popular method is using a clearfix class. Simply add an extra class, let’s call it clear, to the parent of the floating elements.

.clear:before,
.clear:after {
  content: "";
  display: table;
}
 
.clear:after {
  clear: both;
}
 
.clear {
  zoom: 1; // necessary for IE6 and IE7
}

Source: Clearing Floats: An Overview of Different clearfix Methods

Post a Comment

To post code, use the code tag with a class language-*
Examples: code class="language-markup"code class="language-css"