CSS Floats

CSS Floating is the aligning of element left or right such that other elements can wrap it.

How Elements Float

Elements are floated horizontally, this means that an element can only be floated left or right, but not up or down. A floated element will move all the way to the left or right of the parent (containing) element. The elements after the floating element will flow to wrap while the elements before the floating element will not be affected.

The following examples floats all <div> elements to the right.

Floating Elements Together

Elements can be floated together if they are placed next to each other.

The above example will float all elements with class="menus", to the left of each other, with 5px margin around them to distinguish.

Disabling Floats

Elements after the floating element will flow around it. To avoid this, use the clear property. The clear property specifies which sides of an element other floating elements are would not float to.

i {
  clear: both;
}

  Do It Yourself

You can also decide to clear either the left or right of an element, so that no element will float to the left or right of the specified element.

.menus {
clear: left;
}
.top-menu {
clear: right;
}

What You Should Know at the End of This Lesson

• You should be able to tell briefly what CSS Floats is all about.
• You should be able to correct the alignment of block-level elements with CSS Floats.
• You should be able to specify that a floating element should float or not to another floating element with the clear property.
• If you enjoyed this lesson, please share.