CSS float was originally designed for text wrapping around images, but was widely used for layouts before Flexbox and Grid. Common issues include container collapse (parent shrinks to zero height), elements not clearing floats, and unexpected text wrapping. Modern layouts should use Flexbox or Grid instead.
/* ❌ Problem "” container collapses */
.container { background: lightblue; }
.child { float: left; height: 100px; }
/* container has 0 height! */
/* ✅ Solution 1: Clearfix */
.container::after {
content: '';
display: table;
clear: both;
}
/* ✅ Solution 2: overflow: hidden */
.container { overflow: hidden; }
/* ✅ Best solution: Use Flexbox instead */
.container { display: flex; gap: 16px; }/* ❌ Floated children cause parent to collapse */
.container { background: lightblue; padding: 10px; }
.left { float: left; width: 50%; }
.right { float: right; width: 50%; }
/* container height = 0 "” background not visible! *//* ✅ Modern clearfix */
.container::after {
content: '';
display: table;
clear: both;
}
/* ✅ Or overflow: hidden (simpler) */
.container { overflow: hidden; }
/* ✅ Or display: flow-root (modern, no side effects) */
.container { display: flow-root; }/* ❌ Footer wraps around floated sidebar */
.sidebar { float: left; width: 30%; }
.content { float: right; width: 70%; }
.footer { /* Wraps around floated elements! */ }/* ✅ Clear floats before footer */
.footer { clear: both; }
/* ✅ Or use a clearfix div in HTML */
/* <div class="clearfix"></div> */
.clearfix { clear: both; }/* ✅ Float image with text wrap (original use case) */
.article img {
float: left;
margin: 0 16px 16px 0; /* Space between image and text */
max-width: 300px;
}
/* ✅ Clear after article to prevent affecting next section */
.article::after {
content: '';
display: table;
clear: both;
}/* ✅ Replace float layout with Flexbox */
/* Old float approach */
.sidebar { float: left; width: 30%; }
.content { float: right; width: 70%; }
/* Modern Flexbox approach */
.layout {
display: flex;
gap: 24px;
}
.sidebar { flex: 0 0 30%; }
.content { flex: 1; }
/* ✅ Or CSS Grid */
.layout {
display: grid;
grid-template-columns: 30% 1fr;
gap: 24px;
}Floated elements are removed from the normal document flow, so the parent doesn't account for their height. Fix with clearfix (::after { content:""; display:table; clear:both; }) or display: flow-root on the parent.
Clearfix is a CSS technique to make a container expand to contain its floated children. The modern approach is adding ::after { content:""; display:table; clear:both; } to the container, or using display: flow-root.
No. Use Flexbox or CSS Grid for layouts. Float was a workaround before these layout systems existed. Float is still appropriate for its original purpose: wrapping text around images.
display: flow-root creates a new Block Formatting Context (BFC) that contains floated children without the side effects of overflow: hidden (like clipping content). It's the cleanest modern clearfix solution.
You can't with float "” columns have natural heights. Use Flexbox (align-items: stretch is default) or CSS Grid, which both support equal-height columns natively.
Explore 500+ free tutorials across 20+ languages and frameworks.