CSS Float and Clear

Before Flexbox and Grid layouts appeared, float was the primary technique in CSS for creating multi-column layouts and implementing text wrapping around images. Although better modern layout tools exist now, understanding float is still important because you might encounter it in legacy code, and it remains useful in specific scenarios (like text wrapping).

float Property

The float property allows an element to be taken out of the normal document flow and moved to the left or right side of its container.

• float: left;: The element floats to the left.
• float: right;: The element floats to the right.
• float: none;: (Default) The element does not float.

When an element is floated, the content following it (like text) will wrap around it.

img {
  float: right;
  margin: 0 0 10px 10px; /* Add some margin to the image */
}

Problems Caused by Floated Elements: Container Height Collapse

When all child elements inside a container are floated, these children are taken out of the document flow. The container thinks it has no content inside, causing its height to become 0. This is called "height collapse". This breaks the layout of subsequent elements.

<div class="container">
  <div class="box" style="float: left;">Box 1</div>
  <div class="box" style="float: left;">Box 2</div>
</div>
<p>This text should be below the container, but now it will move up.</p>

clear Property

The clear property specifies which side of an element should not have floating elements. It is used to "clear" the effects of floats and solve the height collapse problem.

• clear: left;: No floating elements allowed on the left side.
• clear: right;: No floating elements allowed on the right side.
• clear: both;: No floating elements allowed on either side. This is the most commonly used value.

Methods to Solve Height Collapse

There are several ways to clear floats and fix container height collapse.

1. Using an Empty div

Add an empty div at the end of the floating elements, just before the container's closing tag, and set clear: both; on it.

<div class="container">
  <div class="box">...</div>
  <div class="box">...</div>
  <div style="clear: both;"></div>
</div>

This method works but adds meaningless HTML elements, so it is not recommended.

2. overflow Property

Set overflow: auto; or overflow: hidden; on the parent container of the floating elements. This creates a new Block Formatting Context (BFC), which "wraps" the internal floating elements, preventing height collapse.

.container {
  overflow: auto;
}

This is a simple and effective method.

3. The Clearfix Hack

This is the most modern and recommended method. It uses the ::after pseudo-element to add invisible content at the end of the container to clear floats.

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

Then, you just need to add the clearfix class to any container that holds floating elements.

<div class="container clearfix">
  <div class="box">...</div>
  <div class="box">...</div>
</div>

While modern layouts primarily use Flexbox and Grid, understanding how float and clear work helps you better understand the history of CSS layout and handle some legacy issues.