Suggest an editImprove this articleRefine the answer for “CSS clearing methods”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**CSS clearing methods** - techniques that force a parent container to wrap around floated children that have exited normal document flow. ```css /* Standard clearfix */ .container::after { content: ""; display: table; clear: both; } /* BFC without side effects (modern) */ .container { display: flow-root; } ``` **Key point:** Flexbox and Grid don't need clearing - height collapse from floats doesn't happen there.Shown above the full answer for quick recall.Answer (EN)Image**CSS clearing methods** - techniques that force a parent container to expand around floated children after those children exit the normal document flow. ## Theory ### TL;DR - Float removes elements from normal flow, so the parent collapses to 0 height - The clearfix technique (`.clearfix::after`) is the standard fix for float-based layouts - `overflow: hidden` creates a BFC but clips any `position: absolute` children that overflow - `display: flow-root` creates a BFC with no side effects - the clean modern option - Flexbox and Grid don't have this problem at all ### Why parents collapse When you apply `float: left` or `float: right` to a child, the browser removes it from normal flow. The parent calculates its height by summing only its in-flow block children. Floated elements don't count. So a container holding nothing but floated divs ends up with `height: 0`. The red border below renders as a flat line: ```css .container { border: 2px solid red; } .box { float: left; width: 100px; height: 100px; } ``` ```html <div class="container"> <div class="box"></div> <div class="box"></div> </div> <!-- Border: flat line. Floats overflow below. --> ``` ### The clearfix technique The most widely used fix. Add a `::after` pseudo-element to the parent: ```css .clearfix::after { content: ""; display: table; clear: both; } ``` Apply the class to the parent, not the floated children: ```html <div class="container clearfix"> <div class="box" style="float: left;"></div> <div class="box" style="float: left;"></div> </div> ``` `clear: both` positions the pseudo-element below all preceding floats. The parent must then include that element in its height. No extra HTML needed. Bootstrap 3 and 4 used this exact pattern for navbars and media objects. One thing worth knowing: `clear` is a CSS property. `clearfix` is the name of this technique that uses `clear` inside a pseudo-element. They are not the same thing. ### The overflow method ```css .container { overflow: hidden; } ``` Any `overflow` value other than `visible` creates a new block formatting context (BFC). A BFC must contain its floated descendants, so height collapse stops. Fast to add. But `overflow: hidden` clips any child with `position: absolute` that extends outside the container. I've seen this cut off a dropdown tooltip in production - it's a quiet bug that takes time to trace back. Use it only when you're sure nothing needs to overflow. ### display: flow-root ```css .container { display: flow-root; } ``` Creates a BFC with no side effects. No clipping, no scrollbars, no pseudo-elements. Supported by all modern browsers since 2018. If you're writing new code that still uses floats (email HTML, for example), this is the right choice. ### When to use each - Maintaining Bootstrap 3/4 or older WordPress themes: clearfix is already there, keep using it - Quick fix with no absolutely positioned children: `overflow: hidden` - New code that still requires floats (email newsletters): `display: flow-root` - New layout work: skip floats entirely and use Flexbox or Grid ### Common mistakes **Adding `clear: both` to the floated element itself:** ```css .box { float: left; clear: both; } /* Parent still collapses */ ``` `clear` tells an element where to position relative to preceding floats. A floated element is already outside normal flow, so clearing itself has no effect on the parent's height. The fix belongs on a sibling after the floats, or on the parent's `::after` pseudo-element. **Using `overflow: hidden` when children need to overflow:** ```css .container { overflow: hidden; position: relative; } /* Dropdown or tooltip with position: absolute gets clipped */ ``` Common in older codebases. Clearfix or `flow-root` avoid this entirely. **Applying clearfix to an inline element:** `display: table` inside `::after` needs a block-level parent to behave correctly. If the target element is `display: inline`, the layout breaks without any error. Always apply clearfix to block elements. ### Follow-up questions **Q:** What is a block formatting context and how does clearing relate to it? **A:** A BFC is an isolated layout region where floats are contained and margins don't collapse with the outside. `overflow: hidden` and `display: flow-root` create a BFC, forcing the container to include floated children in its height. Clearfix takes a different approach: it injects a block after the floats, which pushes the parent's bottom edge down. **Q:** Why does `display: table` work inside the clearfix `::after`? **A:** `display: table` generates a block-level box. That box responds to `clear: both`, so it positions itself below all preceding floats. As a side bonus, it also prevents margin collapse between the pseudo-element and the container's children. **Q:** clearfix vs `display: flow-root` - which to pick? **A:** `flow-root` is cleaner and has no side effects. Use clearfix only when maintaining a codebase that already has it everywhere, or when you need to support browsers from before 2018. **Q:** Does clearfix work inside a Flexbox container? **A:** No. Floats are ignored inside flex containers, so there is nothing to clear. Height collapse from floats does not happen in Flexbox. ## Examples ### Basic: parent collapse and the fix ```html <!DOCTYPE html> <html> <head> <style> .container { border: 2px solid red; margin-bottom: 20px; } .box { float: left; width: 80px; height: 80px; background: steelblue; margin: 8px; } .clearfix::after { content: ""; display: table; clear: both; } </style> </head> <body> <!-- Broken: border collapses to a line --> <div class="container"> <div class="box"></div> <div class="box"></div> </div> <!-- Fixed: border wraps both boxes --> <div class="container clearfix"> <div class="box"></div> <div class="box"></div> </div> </body> </html> ``` First container: flat red line. Second: full-height border wrapping both blue boxes. The only change is adding `clearfix` to the parent. ### Real-world: media object (Bootstrap 3 pattern) ```html <article class="media clearfix"> <img src="avatar.jpg" style="float: left; width: 64px; margin-right: 12px;"> <div class="media-body"> <h4>Post title</h4> <p>Text sits beside the image. Parent height adjusts to content.</p> </div> </article> ``` ```css .media::after { content: ""; display: table; clear: both; } ``` Bootstrap 3 source used exactly this pattern for `.media` components. Without clearfix, `<article>` collapses to the text height and the image sticks out below the card border.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.