ruk·si

🎨 CSS
Clearing Floats

Updated at 2014-10-24 15:27

float removes element from the normal document flow. The floater goes to parent's edge at left or right while siblings will wrap around it. If cannot fit, goes to next available edge down.

.to-left {
    float: left;
}

Clearing floats is necessary when:

  1. floating elements can be taller than the non-floating siblings.
  2. there are only floating elements in the parent.

Clearing floats using an empty element.

.clear-here {
    clear: both;
}
<div>
    <img src="*" class="to-left">
    <p>Lorem ipsum dolor est.</p>
    <div class="clear-here"></div>
</div>

Clearing floats using a class in the parent.

.clearfix:after {
    content: '';
    display: table;
    clear: both;
}
<div class="clearfix">
    <img src="*" class="to-left">
    <p>Lorem ipsum dolor est.</p>
</div>

Sources