Using CSS floats is a common thing Web designers do to align different elements in the markup according to their design. But it’s a bit tricky to deal with them if you are a CSS beginner and using CSS floats for the first time.

What’s that tricky part?

When an element in the markup is floated left or right, it’s parent (or the container element) stops containing it which removes it from the layout flow. Fixing this collapse is required to bring back the flow and alignment of elements in the layout.

Sometimes this layout collapse is not noticeable due to transparent background, but it’s good practice to fix it up by clearing floats.

Take a look at the following example of the collapse in the alignment caused by CSS floats:

Such breaking of flow and alignment in the markup can be fixed by making use of some handy CSS techniques which we’ll be discussing in the rest of the article.

Clearing floats by adding a clear element

Adding a clear element after the floating element(s) is the most common way people use to clear floats in CSS and you might be implementing this thing in your markup already. In this technique, we basically use a clear element to clear floats of the siblings. The clear element is generally used after the floated siblings with no child elements or content in it.

CSS for the clear div

.clear { clear: both; }

Using clear div in markup

<div><!-- Parent or Container Div -->
    <div class="left-floated-div">
        Floated Element 1
    </div>
    <div class="right-floated-div">
        Floated Element 2
    </div>
    <div class="clear"></div>
</div>

Implementation

Micro Clearfix: Clear floats through parent

Well, this one is my favorite way to clear floats and I recommend it to you as well. The best part is, it keeps the markup clean. It keeps the developer from adding an extra clear element in the markup (like we did in the previous technique).

The modern day markup experts use this technique to avoid the clutter in the markup. This technique invented by Nicolas Gallagher, who has taught so many hacks about CSS to me and many others. Read his original post on micro-clearfix hack.

In this technique, the parent element is given some magical CSS properties to clear the floats of all its children.

CSS for the parent

.clearfix {
  *zoom: 1;
}
.clearfix:before, 
.clearfix:after {
  content: '';
  display: table;
}
.clearfix:after {
  clear: both;
}

Markup to clear float through parent

<div class="clearfix"><!-- Parent or Container Div -->
    <div class="left-floated-div">
        Floated Element 1
    </div>
    <div class="right-floated-div">
        Floated Element 2
    </div>
</div>

Implementation

Hope you find this useful. Feel free to ask a question or share your techniques to clear floats. Thanks :)