CSS Float and Clear

Z-index stacked overlapping layers. float and clear solve a different classic problem: let text hug the side of an image or callout, then decide when the next block must drop below those floats. Learn the wrap pattern — then leave page grids to Flexbox and Grid.

A float & clear toolkit

📊 Float and clear at a glance

Tool	Everyday job
`float: left`	Pulls the box left; following content can wrap on the right
`float: right`	Pulls the box right; following content can wrap on the left
`float: none`	Default — no float behavior
`clear: left`	Next block refuses to sit beside left floats
`clear: right`	Next block refuses to sit beside right floats
`clear: both`	Next block drops below any floats on either side
Clearfix	Parent grows to contain floated children (e.g. `overflow` or `display: flow-root`)

Floated boxes leave normal flow in a special way: neighbors may wrap beside them, and a parent can collapse to zero height if it only contains floats. That collapse is why clearfix exists.

Float an image, wrap the story

Pull a figure left and let paragraphs flow beside it. Give the image a width so wrapping looks intentional, not accidental.

Image float left

css

.article img.pull-left {
float: left;
width: 40%;
max-width: 220px;
margin: 0 1rem 0.75rem 0;
}

Float a callout the other way

A short tip or quote can sit on the right while body text wraps on the left. Keep margins so text does not kiss the box.

Callout float right

css

.tip {
float: right;
width: 38%;
margin: 0 0 1rem 1rem;
padding: 0.75rem 1rem;
background: #f5f7ff;
border-left: 3px solid #0b5fff;
}

Clear — stop hugging the float

When a heading, footer, or next section must start on a fresh line below floats, use clear. clear: both is the everyday “drop below everything floated.”

Clear both after floats

css

.article-footer {
clear: both;
padding-top: 1rem;
border-top: 1px solid #eee;
}

Collapsed parents need a clearfix

If a parent only wraps floated children, its height may collapse and backgrounds/borders look broken. A calm fix is overflow: auto (or hidden) on the parent — or the modern display: flow-root.

Overflow clearfix

css

.media-row {
overflow: auto;
padding: 1rem;
border: 1px solid #e5e5e5;
}

.media-row img {
float: left;
margin-right: 1rem;
}

flow-root — a clear containing block

display: flow-root creates a new block formatting context so the parent contains its floats without borrowing overflow side effects.

flow-root clearfix

css

.card-with-float {
display: flow-root;
padding: 1rem;
background: #fff;
border: 1px solid #ddd;
}

A calm float habit

Use float for text-around-media and small wrap tricks. Prefer Flexbox or Grid for navs, page columns, and card grids. Remember: position places; z-index layers; float wraps.

Media plus copy pattern

css

.feature {
display: flow-root;
}

.feature__media {
float: left;
width: 42%;
margin: 0 1rem 0.5rem 0;
}

.feature__copy {
/* wraps beside the media, then clears naturally as needed */
}

Try it yourself

Float an image left inside a paragraph-heavy article and tune margins.
Float a tip box right and wrap body text beside it.
Add clear: both to a footer that was sliding up beside floats.
Fix a collapsed parent with overflow: auto or display: flow-root.
Write one sentence: when would you choose Flex instead of float?

Common mistakes

Building whole page layouts with float instead of Flex/Grid
Forgetting clear so footers climb beside images
Ignoring collapsed parents around floated children
Treating float like position or like z-index
Putting clear only on the floated box when you meant the following block

Summary

float pulls a box aside so following content can wrap
clear forces later blocks to drop below floats
Parents of only-floats may collapse — clearfix with overflow or flow-root
Keep float for wrap patterns; use Flex/Grid for page structure
Placement and stacking stay in their own tools (position, z-index)

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓

Questions

🎯

70%

To Pass

♾️

∞

Time

🔄

∞

Attempts

📝 Instructions

Read each question carefully
Select the best answer for each question
You can retake the quiz as many times as you want
Your progress will be shown at the top

Language