MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Welcome to Chapter 11! 📰
Pick up any printed newspaper or school magazine: You will often see a photograph of the school football captain pushed over to the right-hand corner, while paragraphs of article text wrap smoothly around the left and bottom edges of the photo.
In web design, this magazine-style text wrapping is created using the CSS float property!
While modern layout systems like Flexbox and CSS Grid are now used for full-page structures, float remains essential for wrapping text around media and understanding millions of existing production websites.
In this lesson, you will master:
float: left and float: right workclear property stops text wrappingdisplay: flow-root)To understand float and clear, imagine reading a School Magazine:
+-------------------------------------------------------------------------+ | FLOAT AND CLEAR VISUALIZED | +-------------------------------------------------------------------------+ | FLOAT: RIGHT | | Paragraph text flows smoothly across the page, +--------------------+ | | then detects a floating image on the right edge | PHOTO: CRICKET | | | of the page. The words politely flow around its | TEAM VICTORY 2026 | | | left and bottom boundaries, filling the space +--------------------+ | | naturally just like in a printed sports magazine article! | | | | CLEAR: BOTH (THE ICEBERG WARNING) | | If a new heading says "clear: both;", it refuses to wrap beside the | | image. It waits patiently until the bottom edge of the photo has ended, | | and begins cleanly beneath it! | +-------------------------------------------------------------------------+
float: left and float: rightThe float property accepts three main values:
float: left;: Pushes the element to the far left of its container. Text flows around its right side.float: right;: Pushes the element to the far right of its container. Text flows around its left side.float: none;: (Default) Element stays in normal flow without floating.clear PropertyWhat if you have a second section or a sub-heading that should NOT wrap around the image, but start on a fresh new line below it?
You use the clear property!
clear:clear: left;: Pushes element below any left-floated elements.clear: right;: Pushes element below any right-floated elements.clear: both;: Pushes element below all floated elements (most widely used).This is one of the most shocking bugs CSS beginners encounter!
When you put floated elements inside a parent container (like a card <div>), the parent container collapses to zero height (or fails to wrap around the floated children)!
Because floated elements are taken out of the normal vertical document flow, the parent container thinks it has no contents, so its height collapses!
There are two modern ways to fix parent collapse:
display: flow-root;) ⭐In modern CSS, the cleanest, one-line fix is display: flow-root; on the parent container. It establishes a new Block Formatting Context that automatically encloses all floated children:
If you need compatibility with older browsers, the industry standard is the pseudo-element clearfix:
In the 2000s and early 2010s, web developers had to build entire multi-column website grids using float: left; width: 33.3%;. It required dozens of clearfix hacks, caused accidental layout wrapping bugs, and was painful to maintain.
Today:
float ONLY for: Wrapping text around an image or quote inside an article.| Bad Practice ❌ | Why It Fails ⚠️ | Better Approach ✅ |
|---|---|---|
| Forgetting margins around a floated image | The wrapping text sticks directly against the photo edge with zero breathing room. | Always add margin-right or margin-left to the floated element. |
| Forgetting to clear floats on the parent | The parent background disappears or borders collapse to 0px. | Add display: flow-root; to the parent container. |
Using float: left to align 3 cards in a row | Float layout is fragile; if one card is 2px taller, the third card snags awkwardly. | Use modern Flexbox (display: flex; gap: 20px;). |
| Floating text without specifying a width | Non-image elements might collapse or behave unpredictably when floated. | When floating text boxes, always specify an explicit width. |
float: left / float: right pushes an element to the side and lets inline text wrap around it.clear: both stops text wrapping and forces subsequent elements below the floated element.display: flow-root; is the modern one-line solution to contain floated children cleanly.float for editorial text-wrapping; use Flexbox/Grid for website structure.float property?<div> if all the child elements inside it are floated, and no clearfix is applied?clear: both; accomplish on an element?float for multi-column page layouts?school-magazine-article.html.display: flow-root:In the next lesson, we will continue your web styling journey with Aligning Elements: Mastering text-align, margin auto, and Centering Tricks (Basic Layout Techniques).
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
Test your understanding of this lesson with 5 questions. Each question has one correct answer.