CSS Float

CSS Float and Clearing

The float property in CSS was traditionally used for creating layouts, but its primary modern use is for allowing text to wrap around elements, typically images. Understanding float and how to ‘clear’ floats is still important.

What is CSS float?

The float property specifies that an element should be taken out of the normal document flow and shifted to the left or right of its container. Other content (like text) will then flow around the floated element.

Possible values for float:

• left: The element floats to the left of its container.
• right: The element floats to the right of its container.
• none: The element does not float (default value).
• inherit: The element inherits the float value of its parent.

Example: Floating an Image

A common use case for float is to make text wrap around an image:

img.thumbnail {
  float: left;
  width: 150px;
  height: auto;
  margin-right: 15px; /* Space between image and text */
  margin-bottom: 5px; /* Space below image if text is short */
}

/* HTML would be like:
<p>
  <img src="image.jpg" alt="Thumbnail" class="thumbnail">
  This text will wrap around the floated image. If there is enough text,
  it will continue alongside the image and then flow underneath it once
  it passes the image's height. ...
</p>
*/

The clear Property

When elements are floated, subsequent elements in the normal flow will wrap around them. Sometimes, you want an element to appear below floated elements, rather than beside them. This is where the clear property comes in.

The clear property specifies on which sides of an element floating elements are not allowed.

• clear: left;: The top edge of the element is moved below any left-floating elements that precede it.
• clear: right;: The top edge of the element is moved below any right-floating elements that precede it.
• clear: both;: The top edge of the element is moved below both left and right-floating elements.
• clear: none;: No clearing effect (default).
• clear: inherit;: Inherits the clear value from its parent.

Example: Clearing a Footer

.content-with-floats {
  /* ... contains floated elements ... */
}

.footer {
  clear: both; /* Ensures footer appears below all floated content */
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
}

Containing Floats (The “Clearfix” Problem)

A common issue with floats is that if a parent element contains only floated children (or if floated children are taller than any non-floated content within the parent), the parent element will collapse in height, as if it’s empty. This can break layouts.

Modern Solutions to Contain Floats:

1. display: flow-root;

The simplest and most modern way to make a parent element contain its floated children is to set display: flow-root; on the parent. This creates a new block formatting context, causing the parent to expand to contain the floats.

.parent-container {
  display: flow-root;
  border: 1px solid blue; /* To visualize its bounds */
}

.parent-container .floated-child {
  float: left;
  width: 100px;
  height: 100px;
  background-color: lightcoral;
  margin: 5px;
}

2. The Pseudo-element Clearfix (Legacy but still common)

Before display: flow-root; had wide support, a common technique was the pseudo-element clearfix:

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

/* Apply this class to the parent container:
<div class="parent-container clearfix">
  <div class="floated-child">...</div>
</div>
*/

3. overflow: auto; or overflow: hidden; (with caveats)

Setting overflow to a value other than visible (e.g., auto or hidden) on the parent element also creates a new block formatting context and will contain floats. However, this can sometimes lead to unwanted scrollbars or content clipping if not used carefully.

Floats for Layout (Historical Context)

Historically, float was heavily used for creating multi-column page layouts. While it worked, it often required complex clearing strategies and could be brittle.

Modern CSS offers better tools for layout, such as Flexbox and CSS Grid, which are generally preferred over floats for overall page structure. However, understanding floats is still valuable for working with legacy code and for its intended purpose of text wrapping.

All CSS Float and Clear Properties

Property	Description	Values
float	Specifies whether an element should float out of the normal flow.	left | right | none | inherit
clear	Specifies on which sides of an element floating elements are not allowed to float.	none | left | right | both | inherit