Float

By the end of this lesson, you will be able to use CSS float to place an element to one side of its container and let surrounding text flow around it, while recognizing when modern layout tools are a better choice.

What it is

float is a legacy CSS layout property that moves a box to the left or right edge of its containing block. Inline content, such as text, wraps around the floated box. The floated box is removed from the normal block flow, so later block-level elements may move up beside it unless they are cleared.

Related terms include containing block, clear, clearfix, inline flow, and block formatting context.

Why it matters

• It is the classic way to wrap text around images, pull quotes, or small callout boxes.
• Many older websites use floats for columns, so you need to understand them when maintaining legacy CSS.
• It explains why parent containers can collapse and why clear or a clearfix is needed.
• It helps you compare old layout techniques with modern flexbox and grid.

Syntax or steps

The smallest useful pattern is to apply float to the element you want to move, then add spacing so text does not touch it.

float: left;
float: right;
float: none;

After floating, you may need to clear the float:

.clear {
  clear: both;
}

Example

<!doctype html>
<html>
<head>
<style>
.float-left {
  float: left;
  width: 180px;
  height: 120px;
  margin: 0 12px 8px 0;
  background: #d8e7ff;
  border: 1px solid #7aa7ff;
}

.clear {
  clear: both;
}
</style>
</head>
<body>
<article>
  <div class="float-left">Floated box</div>
  <p>The paragraph text wraps around the floated box because the box has been moved to the left edge of its container.</p>
  <p class="clear">This paragraph starts below the floated box.</p>
</article>
</body>
</html>

1. The .float-left rule applies float: left, which is the same idea as img { float: left; margin-right: 12px; }.
2. The margin creates space between the floated box and the wrapping text.
3. The fixed width and height make the example runnable without an image file.
4. The .clear rule pushes the second paragraph below the float instead of letting it move beside it.

Common mistakes

• Forgetting to clear or contain floats. A parent container may collapse because floated children are out of normal flow. Fix it by adding clear: both to a following element, using overflow: auto on the parent, or applying a clearfix.
• Using float for full page layout today. Floats can create brittle column layouts. Use flexbox for rows and columns, or grid for complex page structures.
• Not adding margin. Text can touch the floated element. Add margin-right for left floats or margin-left for right floats.
• Assuming all siblings move beside the float. Only inline content wraps around it; block-level siblings may move beside it unless cleared.

When to use it

Float is appropriate for simple text wrapping and legacy code. For new layout work, prefer flexbox or grid.

Practice

Guided exercise: Create a paragraph with a div floated left. Give it a background color, width, and right margin. Observe how the text wraps around it.

Challenge: Add a second floated box on the right, then make a third paragraph start below both boxes.

Hint: Use float: left, float: right, and clear: both.

Quick check

Question: What does clear: both do?

Answer: It prevents an element from moving beside left or right floats, pushing it below them.

Summary

Float is a CSS tool for moving an element to one side and letting inline content wrap around it. It remains important for legacy layouts and simple image-text patterns, but modern page layout usually uses flexbox or grid.