Floats & Clearing

CSS Floats & Clearing

CSS floats move an element to the left or right side of its container and allow surrounding inline content to flow around it. The clear property controls whether an element can appear beside a preceding floated element.

The float Property

The CSS float property places an element on the left or right side of its containing block. Surrounding inline content, such as text, can then flow around the floated element.

img {
  float: left;
}

Common float values include left, right, and none. The initial value is none.

Floating Left

Setting float: left; moves an element toward the left side of its container and allows following content to flow along its right side.

img {
  float: left;
  margin-right: 15px;
}

Floating an image to the left of text is a common use of the float property.

Floating Right

Setting float: right; moves an element toward the right side of its container and allows following content to flow along its left side.

img {
  float: right;
  margin-left: 15px;
}

Spacing Around Floats

Margins are commonly used to create space between a floated element and the content that wraps around it.

.photo {
  float: left;
  margin: 0 15px 10px 0;
}

In this example, the right and bottom margins provide space between the floated element and the surrounding content.

The clear Property

The CSS clear property controls whether an element can be placed next to preceding floated elements.

.next-section {
  clear: both;
}

With clear: both;, the element is moved below relevant floats on either side instead of appearing alongside them.

Clear Values

The most common values of the clear property are none, left, right, and both.

.left-clear {
  clear: left;
}

.right-clear {
  clear: right;
}

.all-clear {
  clear: both;
}

clear: left; prevents the element from appearing beside preceding left floats, clear: right; applies to preceding right floats, and clear: both; clears both sides.

Containing Floats

A floated element can extend beyond the bottom of a parent when the parent has no other content tall enough to contain it. One modern way to make the parent contain its floats is to use display: flow-root;.

.container {
  display: flow-root;
}

The flow-root value creates a new block formatting context. Among other effects, this allows the container to enclose its floated children without adding extra clearing markup.

Older websites may use a clearfix technique for this purpose, but flow-root provides a straightforward modern solution when containing floats is the goal.

Floats and Modern Layout

Floats were once widely used to build entire page layouts, including columns and navigation areas. Modern CSS provides Flexbox and Grid, which are better suited to most page layout tasks.

Floats are still useful when content should wrap around an element, such as an image within an article.

.article-image {
  float: left;
  margin: 0 15px 10px 0;
}

The next tutorials introduce Flexbox and Grid for modern layout.

Try Floats and Clearing

Edit the float value in the example to compare left, right, and none. Then remove or change clear: both; to see how the following content responds to the float.

Summary

The CSS float property moves an element to the left or right and allows surrounding content to flow around it. The clear property controls whether following elements can appear beside preceding floats, while display: flow-root; can be used to make a container enclose its floated children.

The next tutorial covers Flexbox Basics and introduces a modern method for arranging and aligning elements in rows or columns.