Skip to main content

float and clear (Traditional Layout)

Before Flexbox and Grid became the standard for complex layouts, the float property was the primary tool used for creating multi-column designs and, more commonly, for wrapping text around elements (like images).

Understanding float is important for maintaining legacy code and for achieving its original purpose: text wrapping.


1. The float Property​

The float property takes an element, removes it from the normal document flow, and pushes it to the far left or far right of its container. Subsequent content (usually text) then wraps around the floated element.

Key Values:​

ValueBehavior
float: left;Pushes the element to the left side of the container.
float: right;Pushes the element to the right side of the container.
float: none;The default value; the element remains in the normal flow.

Behavior Details​

  1. Removed from Flow: A floated element is taken out of the normal document flow. The content that follows it (e.g., a paragraph) behaves as if the floated element does not exist.
  2. Squeeze: The subsequent content then moves up to fill the space left by the removed element and proceeds to wrap around the visible floated box.
  3. Inherently Block-Like: Floating an inline element (like a <span>) automatically makes it behave like a block element, meaning it respects explicit width and height properties.

2. The Collapse Problem (Side Effect)​

Because a floated element is removed from the normal flow, it no longer contributes to the height of its parent container. This is known as Parent Height Collapse.

In the example above, the floated column moves out of the parent container, causing the parent's background and border to collapse around the non-floated content, leading to a broken layout.


3. The clear Property​

The clear property is used to prevent an element from positioning itself alongside a previously floated element. In other words, it forces an element to drop below any floating elements on the specified side.

The clear property is applied to the element after the float that you want to stop interacting with.

Key Values:​

ValueDescription
clear: left;Forces the element to drop below any element floated left.
clear: right;Forces the element to drop below any element floated right.
clear: both;Forces the element to drop below both left- and right-floated elements. (Most common choice)

4. The Clearfix Solution (Fixing Collapse)​

To fix the Parent Height Collapse problem, you need to ensure the parent container knows where the floated elements end. The modern and reliable way to do this is using the Clearfix Hack on the parent container.

The clearfix hack uses the CSS pseudo-element ::after to generate a block-level element at the end of the container and then applies clear: both to that pseudo-element.

The Clearfix CSS​

styles.css
.clearfix::after {
  content: "";       /* 1. Generates an empty piece of content */
  display: table;    /* 2. Uses display: table for better IE support (block also works) */
  clear: both;       /* 3. Clears both left and right floats within the container */
}

To use it, you simply apply the class to the container whose children are floated:

styles.css
<div class="parent-container clearfix">
  <!-- Floated Children Go Here -->
</div>

Interactive float and clear Demo​

Observe the following behaviors by modifying the CSS in the demo:

  1. Initial State: The red and blue boxes float, causing the gray parent border to collapse.
  2. Uncomment Clearfix: Uncomment the rules for .clearfix::after to see the parent boundary snap back to contain the floated boxes.
  3. Uncomment .cleared-element: Uncomment the rules for the green box to see how clear: both forces it to drop below the floating elements.