CSS Float & Clear

CSS Float & Clear

The CSS float property moves an element to one side of its container and allows inline content to wrap around it, while clear controls whether an element can appear beside preceding floats.

Floats were once widely used to construct entire page layouts, but Flexbox and Grid are better suited for most modern layout work. Floats remain useful for their original purpose, such as placing an image to one side while surrounding text flows around it.

The float Property

The float property places an element on the left or right side of its containing block. Inline content that follows can flow around the floated element.

.image {
  float: left;
}

A floated element is taken out of normal block flow, although it continues to affect the layout of surrounding inline content and other floats.

Floating Left

Using float: left moves an element toward the left side of its containing block and allows following inline content to wrap around its right side.

.photo {
  float: left;
  margin-right: 15px;
  margin-bottom: 10px;
}

Margins are commonly added to a floated image so the surrounding text does not sit directly against it.

Floating Right

Using float: right moves an element toward the right side of its containing block and allows following inline content to wrap around its left side.

.photo {
  float: right;
  margin-left: 15px;
  margin-bottom: 10px;
}

The choice between left and right depends on where the floated content should appear relative to the surrounding text.

Removing a Float

The initial value of float is none. It can also be used to override a float that was applied by another CSS rule.

.photo {
  float: none;
}

The element then follows its normal layout behavior instead of floating to one side.

Text Wrapping Around Floats

Wrapping text around an image is one of the most useful modern applications of floats.

<img src="photo.jpg" alt="Mountain landscape" class="photo">
<p>This paragraph flows around the floated image...</p>

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

The image occupies space along the left side while the paragraph's line boxes use the remaining available space beside it. When the text extends below the float, it returns to the full available width.

The clear Property

The clear property controls whether an element must be moved below preceding floating elements.

.next-section {
  clear: both;
}

Using clear: both prevents the element from appearing beside preceding left or right floats.

Containing Floats

A container with only floated content may not expand vertically to contain those floats in the way beginners expect. One modern solution is to establish a new block formatting context with display: flow-root.

.container {
  display: flow-root;
}

The floated descendants are then contained when calculating the height of the container.

.container {
  display: flow-root;
  padding: 15px;
  border: 1px solid #999;
}
.photo {
  float: left;
  margin-right: 15px;
}

For new code, flow-root is often clearer than adding extra markup or using older float-clearing workarounds solely to contain floats.

The Clearfix Technique

Before display: flow-root was widely available, a common technique for containing floats was a clearfix using a generated pseudo-element.

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

The generated box clears the preceding floats, causing the container to extend below them.

You may still encounter clearfix code in existing websites and older CSS frameworks. For new code that simply needs to contain floats, display: flow-root usually expresses the purpose more directly.

Modern Uses for Float

Floats remain part of CSS and are useful when content should wrap around another element. They are no longer the preferred method for creating columns, navigation bars, card rows, or complete page layouts.

Use the layout method that matches the job:

Flexbox and Grid are covered in dedicated subsections later in the Layout tutorials.

CSS Float & Clear Example

The following example floats a box to the left so text wraps around it. A second section uses clear: both to begin below the float. Open the example in the editor and change left to right, remove the float, or remove clear: both to compare the results.

.float-box {
  float: left;
  margin: 0 15px 10px 0;
}
.clear-box {
  clear: both;
}