float and clear in CSS - Wrap Text Around Images Correctly

The float property used to be popular for layouts, and today it is mostly used to wrap text around images or small elements.

If you are looking for float in CSS, how to use clear: both, or how to fix parent collapse caused by floats, this lesson explains it clearly.

What Is float in CSS?

The float property moves an element to the left or right inside its container, while text or other content wraps around it.

• float: left;
• float: right;
• float: none; (default)

Simple definition: float in CSS pushes an element left or right and lets other content wrap around it.

float: right in CSS

img.thumb {
    float: right;
    margin-left: 12px;
}

What does this code do? It places the image on the right and wraps text on the left.

Expected result: a layout similar to news articles.

Common mistake: forgetting margin so the text sticks to the image.

float: left in CSS

img.thumb {
    float: left;
    margin-right: 12px;
}

What does this code do? It places the image on the left and wraps text on the right.

Expected result: text fills the remaining space next to the image.

Common mistake: floating a very large element, which breaks paragraph flow.

What Is clear in CSS?

After floated elements, the following elements may wrap in unwanted ways. Use clear to stop that wrapping.

• clear: left; stops left floats.
• clear: right; stops right floats.
• clear: both; stops both (most common).

.footer {
    clear: both;
}

What does this code do? It forces the footer to start after all floated elements.

Expected result: prevents overlap with floated images/boxes.

Common mistake: forgetting clear at the end of float sections.

Parent Collapse with float (Clearfix)

When all children are floated, the parent height can collapse to zero. The common fixes are clearfix or overflow: auto on the parent.

.parent {
    overflow: auto; /* quick fix */
}

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

What does this code do? It forces the parent to contain its floated children.

Common mistake: ignoring the issue and ending up with overlapping elements below.

When Should You Use float and clear Today?

• Wrapping text around an image in an article.
• Small legacy cases in older projects.
• Not the first choice for columns or full layouts.

Common Mistakes with float and clear in CSS

1) Forgetting clear: causes following elements to wrap unexpectedly.

2) No spacing around floated images: text sticks to the image.

3) Using float for a full layout: harder to maintain than Flexbox/Grid.

FAQ - Common Search Questions

What is float in CSS?

A property that moves an element left or right and lets content wrap around it.

How do I wrap text around an image in CSS?

Float the image with float: right; or float: left; and add margin.

What is the purpose of clear: both in CSS?

It stops float effects and forces the next element to start below the floats.

Why does the parent div collapse when using float?

Because floated children are removed from normal flow; use clearfix or overflow:auto on the parent.

Is float outdated in CSS?

It is still useful for some cases, but modern layouts mostly use Flexbox and Grid.