📘 Lesson · Lesson 24
Float and Clear
Float और Clear
What Float Was For
float pushes an element to the left or right and lets other content (especially text) flow around it. It was originally invented for one simple purpose: wrapping text around an image, like in a newspaper or magazine. For many years, developers also (mis)used float to build whole page layouts — columns side by side — because there was no better tool. Today, flexbox and grid have taken over layout, but float still has its proper, useful role. Understanding it helps you read older code and handle text-wrapping.The Good Use: Wrapping Text Around an Image
img {
float: left; /* image goes left, text wraps on the right */
margin: 0 15px 10px 0; /* space between image and the wrapping text */
}┌────────┐ This text flows around the
│ IMAGE │ floated image, wrapping neatly
│ │ along its right side just like
└────────┘ a magazine article would do.
The text continues full-width below the image.
This is float's proper, intended job. float: left pushes the image to the left and the following text wraps around its right side; float: right does the mirror. Adding a margin gives breathing room between image and text. For this specific effect — text flowing around an image — float is still the right and best tool; flexbox and grid can't do text-wrapping like this. A genuinely useful, current technique.
The clear Property — stopping the wrap
.below {
clear: both; /* this element drops BELOW any floats, no wrapping */
}clear is float's partner. Because floated elements are taken out of normal flow, following content wraps around them — but sometimes you want an element to start fresh BELOW the float instead. clear: both forces an element to move below any floated elements on either side (clear: left or clear: right clear just one side). Think of it as saying "don't wrap next to the float — go underneath it." Commonly used on a footer or a new section that should sit below floated content, not beside it.The Clearfix Hack — the classic float problem
/* Problem: a parent with only floated children COLLAPSES to zero height */
/* The clearfix solution: */
.clearfix::after {
content: "";
display: block;
clear: both;
}A famous float gotcha and its classic fix. When a container holds ONLY floated children, it "collapses" — its height becomes zero, because floated children are out of normal flow and don't stretch their parent. This breaks backgrounds and borders on the container. The "clearfix" hack adds an invisible empty element after the floats that clears them, forcing the parent to wrap around them properly. This hack was EVERYWHERE in older code — if you see
::after { content: ""; clear: both; }, now you know exactly what it does and why. Flexbox eliminates this problem entirely.Float vs Flexbox Today — use the right tool
| Task | Best tool today |
|---|---|
| Text wrapping around an image | float (still the right choice) |
| Columns side by side | flexbox or grid (NOT float) |
| Centering, spacing items in a row | flexbox |
| Whole-page 2D layout | grid |
The modern verdict: use float ONLY for its original purpose — wrapping text around an image. For any layout task (columns, navigation, centering, grids), use flexbox or grid, which are coming right up and are vastly easier and more powerful. If you're building columns with float in 2026, you're doing it the hard, old way. Know float for text-wrap and for reading legacy code; reach for flexbox/grid for everything else.
Exam Corner
Q: What is float's proper use? Wrapping text around an image (float: left/right).
Q: What does clear: both do? Forces an element below any floated elements instead of wrapping beside them.
Q: What is the clearfix hack for? Fixing a parent that collapses to zero height when it contains only floated children.
Q: Should you use float for page-column layouts today? No — use flexbox or grid; float for layout is outdated.
Q: Can flexbox wrap text around an image like float? No — text-wrapping around an image is still float's unique job.
Q: What does clear: both do? Forces an element below any floated elements instead of wrapping beside them.
Q: What is the clearfix hack for? Fixing a parent that collapses to zero height when it contains only floated children.
Q: Should you use float for page-column layouts today? No — use flexbox or grid; float for layout is outdated.
Q: Can flexbox wrap text around an image like float? No — text-wrapping around an image is still float's unique job.
Float किसलिए था
float element को left या right धकेलता है और दूसरे content (खासकर text) को उसके चारों ओर बहने देता है. यह मूलतः एक सरल मकसद के लिए बना था: image के चारों ओर text wrap करना, जैसे अखबार या magazine में. कई सालों तक developers ने float का (गलत) इस्तेमाल पूरे page layouts बनाने को भी किया — columns side by side — क्योंकि कोई बेहतर tool नहीं था. आज flexbox और grid ने layout संभाल लिया, पर float की अब भी अपनी proper, उपयोगी भूमिका है. इसे समझना पुराना code पढ़ने और text-wrapping संभालने में मदद करता है.अच्छा इस्तेमाल: Image के चारों ओर Text Wrap
img {
float: left; /* image baaye, text daaye wrap hota */
margin: 0 15px 10px 0; /* image aur wrap text ke beech space */
}┌────────┐ Yeh text floated image ke charon
│ IMAGE │ or behta hai, uske daaye kinare
│ │ ke saath saaf wrap hota, bilkul
└────────┘ magazine article ki tarah.
Text image ke neeche full-width jari rehta hai.
यह float का proper, इच्छित काम है. float: left image को left धकेलता है और आगे का text उसके right side wrap होता है; float: right उल्टा करता है. Margin जोड़ना image और text के बीच साँस लेने की जगह देता है. इस खास effect के लिए — image के चारों ओर बहता text — float अब भी सही और best tool है; flexbox और grid ऐसा text-wrapping नहीं कर सकते. सच में उपयोगी, वर्तमान तकनीक.
clear Property — wrap रोकना
.below {
clear: both; /* yeh element kisi bhi float ke NEECHE, no wrap */
}clear float का साथी है. क्योंकि floated elements normal flow से हटा दिए जाते हैं, आगे का content उनके चारों ओर wrap होता है — पर कभी आप चाहते हैं element float के NEECHE नए सिरे से शुरू हो. clear: both element को किसी भी तरफ के floated elements के नीचे जाने को मजबूर करता है (clear: left या clear: right सिर्फ एक side clear करते). इसे "float के बगल wrap मत करो — उसके नीचे जाओ" कहना समझिए. आमतौर पर footer या नए section पर use होता है जो floated content के नीचे बैठे, बगल नहीं.Clearfix Hack — classic float समस्या
/* Problem: sirf floated children wala parent zero height me COLLAPSE hota */
/* Clearfix solution: */
.clearfix::after {
content: "";
display: block;
clear: both;
}मशहूर float gotcha और उसका classic fix. जब container में SIRF floated children हों, वह "collapse" होता है — उसकी height शून्य हो जाती है, क्योंकि floated children normal flow से बाहर हैं और अपने parent को नहीं खींचते. यह container के backgrounds और borders तोड़ता है. "clearfix" hack floats के बाद एक अदृश्य खाली element जोड़ता है जो उन्हें clear करता है, parent को उनके चारों ओर ठीक से wrap करने को मजबूर करते. यह hack पुराने code में HAR JAGAH था — अगर
::after { content: ""; clear: both; } दिखे, अब आप ठीक जानते हैं यह क्या करता है और क्यों. Flexbox इस समस्या को पूरी तरह खत्म करता है.आज Float vs Flexbox — सही tool use कीजिए
| Task | आज का best tool |
|---|---|
| Image के चारों ओर text wrap | float (अब भी सही choice) |
| Columns side by side | flexbox या grid (float NAHI) |
| Row में items center, space | flexbox |
| पूरे-page 2D layout | grid |
Modern फैसला: float सिर्फ उसके मूल मकसद के लिए use कीजिए — image के चारों ओर text wrap. किसी भी layout task (columns, navigation, centering, grids) के लिए flexbox या grid use कीजिए, जो अभी आ रहे हैं और बहुत आसान तथा ताकतवर हैं. अगर 2026 में float से columns बना रहे हैं, आप मुश्किल, पुराना तरीका कर रहे हैं. float को text-wrap और legacy code पढ़ने के लिए जानिए; बाकी सबके लिए flexbox/grid लीजिए.
Exam Corner
Q: Float का proper इस्तेमाल क्या है? Image के चारों ओर text wrap (float: left/right).
Q: clear: both क्या करता है? Element को floated elements के बगल wrap करने के बजाय उनके नीचे जाने को मजबूर करता है.
Q: Clearfix hack किसलिए है? उस parent को fix करने को जो सिर्फ floated children होने पर शून्य height में collapse हो जाता है.
Q: क्या आज page-column layouts के लिए float use करना चाहिए? नहीं — flexbox या grid use कीजिए; layout के लिए float पुराना है.
Q: क्या flexbox float जैसा image के चारों ओर text wrap कर सकता है? नहीं — image के चारों ओर text-wrapping अब भी float का अनोखा काम है.
Q: clear: both क्या करता है? Element को floated elements के बगल wrap करने के बजाय उनके नीचे जाने को मजबूर करता है.
Q: Clearfix hack किसलिए है? उस parent को fix करने को जो सिर्फ floated children होने पर शून्य height में collapse हो जाता है.
Q: क्या आज page-column layouts के लिए float use करना चाहिए? नहीं — flexbox या grid use कीजिए; layout के लिए float पुराना है.
Q: क्या flexbox float जैसा image के चारों ओर text wrap कर सकता है? नहीं — image के चारों ओर text-wrapping अब भी float का अनोखा काम है.
💻 Live Code Editor
इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का
console.log देखने के लिए F12 दबाइए.