Float and Clean

Float First

Floated elements should always come first in the document order. Floated elements require something to wrap around, otherwise they can cause a step down effect, instead appearing below the content.

<div class="parent">  
  <div class="float">Float</div>
  <div class="content">
    <!-- ... -->

Floats and clearing

If you float it, you probably need to clear it. Any content that follows an element with a float will wrap around that element until cleared. To clear floats, use one of the following techniques.

Use the micro clearfix to clear your floats with a separate class.

.clearfix:after {
  display: table;
  content: "";
.clearfix:after {
  clear: both;

Alternatively, specify overflow, with auto or hidden, on the parent.

.parent {
  overflow: auto; /* clearfix */
.other-parent {
  overflow: hidden; /* clearfix */

Be aware that overflow can cause other unintended side effects, typically around positioned elements within the parent.

Floats and computed height

A parent element that has only floated content will have a computed height: 0;. Add a clearfix to the parent to force browsers to compute a height.

Floatsssed elements are block level

Elements with a float will automatically become display: block;. Do not set both as there is no need and the float will override your display. Years ago, we had to set display: inline; for most floats to work properly in IE6 to avoid the double margin bug. However, those days have long passed.