CSS Float & Clear
Float was CSS's primary layout method before Flexbox and Grid. While modern layouts prefer Flexbox/Grid, understanding float is still important — you'll encounter it in legacy codebases.
Float Properties Quick Reference
| Property | Common Values | Purpose |
|---|---|---|
float |
left, right, none |
Float direction |
clear |
left, right, both, none |
Clear float effects |
Float Property
float makes elements "float" to one side of their container, with other content wrapping around them.
Example
HTML
<style>
.float-left {
float: left;
width: 120px;
background: #e3f2fd;
border: 1px solid #90caf9;
padding: 10px;
}
.float-right {
float: right;
width: 120px;
background: #fce4ec;
border: 1px solid #f48fb1;
padding: 10px;
}
</style>
<div class="float-left">Float left</div>
<div class="float-right">Float right</div>
<p>Text wraps around the floated elements...</p>
Float Behavior
Example
HTML
<style>
.container {
border: 2px solid #333;
padding: 10px;
}
.image {
float: left;
margin-right: 15px;
margin-bottom: 10px;
width: 150px;
height: 100px;
background: #e3f2fd;
}
</style>
<div class="container">
<div class="image">Image</div>
<p>Text wraps around the floated image. This is the classic text-wrap effect that float was originally designed for. The text flows naturally around the floated element.</p>
</div>
Float Problems: Height Collapse
When all children are floated, the parent "forgets" to wrap them:
Example
HTML
<style>
.parent {
border: 2px solid red;
}
.child {
float: left;
width: 100px;
height: 100px;
background: #e3f2fd;
border: 1px solid #1976d2;
}
</style>
<div class="parent">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
</div>
Result: Parent border hugs the top, children overflow — because floated children don't occupy document flow space.
Clearing Floats
1. Using clear Property (Traditional)
Example
HTML
<div class="parent">
<div class="child">Content</div>
<div class="child">Content</div>
<div style="clear: both;"></div>
</div>
2. Parent overflow
Example
HTML
<style>
.parent {
overflow: hidden;
}
</style>
Uses BFC (Block Formatting Context) behavior.
3. Pseudo-element Clearfix (Recommended)
The standard, recommended method:
Example
HTML
<style>
.clearfix::after {
content: "";
display: block;
clear: both;
}
</style>
<div class="parent clearfix">
<div class="child" style="float: left;">Content</div>
<div class="child" style="float: left;">Content</div>
</div>
Modern Alternative: Flexbox
Most float layouts can now be replaced with Flexbox or Grid:
Example
HTML
<style>
/* Old way: float */
.old-layout {
overflow: hidden;
}
.old-layout .col {
float: left;
width: 33.33%;
}
/* Modern way: Flexbox */
.modern-layout {
display: flex;
}
.modern-layout .col {
flex: 1;
}
</style>
❓ FAQ
Q Is float still used for layouts?
A Not recommended. Float was designed for text wrapping, not layouts. Flexbox and Grid have perfectly replaced float layouts. Only use float for "image + text wrap" effects — that's its correct modern use case.
Q What is clearfix?
A clearfix is a classic hack for clearing float effects. Add `::after { content: ""; display: block; clear: both; }` to the parent container to make it "wrap" floated children. With Flexbox or Grid, clearfix is unnecessary.
Q What to do about float parent height collapse?
A Height collapse happens because floated elements leave the document flow — the parent can't detect their height. Solutions: set `overflow: hidden` on parent, use clearfix, or switch to Flexbox layout.
📖 Summary
- Float was once CSS's main layout method, now largely replaced by Flexbox and Grid
- The core float problem is "height collapse" — the classic fix is clearfix pseudo-element
- For new projects, use Flexbox or Grid; for text-wrap effects, float is still the best choice
📝 Exercises
- Create an image-and-text page with the image floating left and text wrapping around it.
- Use float to implement a "three-column layout" — left 200px, right 200px, center adaptive.
- Demonstrate "height collapse" and solve it with at least three methods (clearfix, overflow, pseudo-element).
- Rewrite the float three-column layout using Flexbox and compare code differences.