Beginner LevelCSS & Modern Layouts
What are CSS floats and why are they considered legacy for layout?
❓ Interview Prompt: Explain float, clear, clearfix, and why Flexbox/Grid replaced float-based layouts.
float: left|right removes an element from normal document flow and shifts it to the left or right edge of its container. Surrounding inline content wraps around the floated element.
Problems with Float Layouts:
1
Parent containers collapse (height becomes 0) when all children are floated.
2
Required hacky
clearfix patterns to restore parent height.3
Complex multi-column layouts required careful margin calculations.
Modern Replacements:
•
Flexbox: One-dimensional layouts (navigation bars, card rows).
•
CSS Grid: Two-dimensional page layouts.
Floats are still valid for their original purpose: wrapping text around images.
Code Implementation Example
css
/* ✅ Valid use: text wrapping around image */
.article img.pull-left {
float: left;
margin: 0 16px 16px 0;
}
/* ❌ Legacy layout hack (don't use for layouts anymore) */
.col { float: left; width: 33.33%; }
.clearfix::after { content: ""; display: table; clear: both; }
/* ✅ Modern replacement */
.row { display: flex; gap: 16px; }💡Valid float use for text wrapping vs modern Flexbox layout.
🎯 Interview Key Takeaway
Use float only for text wrapping around images. Use Flexbox or Grid for all layout needs.
#Float#Legacy#Layout#Beginner
Back to all CSS & Modern Layouts Questions→