CSS Float — Demo

This page covers float and clear. Floats were once the main way to create layouts; now Flexbox and Grid are preferred. Floats are still useful for text wrapping around images. Each example shows output and code.

1. `float: left`

A floated element is removed from normal flow and pushed to the left (or right). Content below wraps around it.

Output

float: left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. The floated box sits on the left and text wraps around it.

Code

.box {
  float: left;
  width: 100px;
}

Explanation: float: left takes the element out of normal flow and moves it to the left. Block content that follows wraps around the right and bottom of the floated element. The floated element must have a width (or it will shrink-wrap).

2. `float: right`

Same as left, but the element is pushed to the right. Text wraps around its left side.

Output

float: right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. The box floats to the right and text wraps on the left. Ut enim ad minim veniam, quis nostrud exercitation.

Code

.box {
  float: right;
  width: 100px;
}

3. `clear` — stop wrapping

Use clear on an element to force it below any preceding floats. Values: left, right, both, none.

Output

float: left

Text wraps here…

This paragraph has clear: both — it starts below the float.

Code

.below-float {
  clear: both;
}

Explanation: clear: both means “do not allow left or right floats beside me.” The element is pushed down below any floats. Use clear: left or clear: right if you only care about one side.

4. Clearfix — contain floats inside a parent

When all children are floated, the parent “collapses” (height becomes 0) because floats are out of flow. Use a clearfix on the parent to make it wrap its floated children.

Output (parent has clearfix)

Float 1

Float 2

The green border shows the parent; it now contains the floats.

Code

.parent::after {
  content: "";
  display: table;
  clear: both;
}

Explanation: The clearfix adds a pseudo-element (::after) that clears both sides. Because it comes after the floats, it is pushed below them, and the parent stretches to include it. Modern alternative: overflow: hidden or overflow: auto on the parent (creates a block formatting context and contains floats).

5. Multiple floats

Multiple elements with float: left line up horizontally (like columns). When there’s not enough space, they wrap to the next line.

Output

Code

.parent::after { content: ""; display: table; clear: both; }
.child { float: left; width: 80px; }

Explanation: Floated elements stack horizontally. The parent needs clearfix (or overflow: hidden) so it doesn’t collapse. For layout, Flexbox or Grid is usually better than floats.

6. Quick summary

float: left / float: right — removes element from flow; content wraps around it.
clear: left / right / both — element starts below preceding floats.
Clearfix: .parent::after { content: ""; display: table; clear: both; } — parent contains floated children.
Floats are still useful for text wrapping (e.g. images in articles); for layout, prefer Flexbox or Grid.

CSS Float — Demo

1. float: left

2. float: right

3. clear — stop wrapping

4. Clearfix — contain floats inside a parent

5. Multiple floats

6. Quick summary

1. `float: left`

2. `float: right`

3. `clear` — stop wrapping