Skip to main content

Floats

Helper classes for floats and clearing of floats.

Examples

Clears are used to fix layout issues when using floats.

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow

If all children of a container are floats then the container collapses. Clears fix this.

Clear float (using overflow hidden)

float left
float right
<div class="co">

<div style="float: left;">...</div>
<div style="float: right;">...</div>
</div>

Clear fix (Micro clearfix)

Source: http://nicolasgallagher.com/micro-clearfix-hack/

float left
float left
<div class="cf">

<div style="float: left;">...</div>
<div style="float: right;">...</div>
</div>