Detailed explanation
You can contain floated children without adding an empty clearing element by applying either display: flow-root to their container or a clearfix using the container’s ::after pseudo-element. For modern browsers, .container { display: flow-root; } is usually the clearest choice. The classic alternative is .container::after { content: ""; display: block; clear: both; }. Both approaches let the container’s automatic height account for its floats, but they achieve this through different layout mechanisms.
Floats are taken out of normal flow, although they still affect how nearby inline content wraps. Consequently, a normal block container does not necessarily expand its automatic height to enclose floated children. If it contains only floats, its content height can be zero, so its background or border may not surround those children as expected. This is often called float containment; strictly speaking, clearing means moving a box below relevant preceding floats. Interviewers may check whether you understand this distinction rather than merely remember a CSS snippet.
The clearfix generates an empty box after the container’s content. Setting content: "" creates the pseudo-element, display: block makes it a block-level box to which clear applies, and clear: both positions it below preceding left and right floats in the same block formatting context. Because that generated box participates in normal flow, the container’s height extends to its position, enclosing the floated content above it. This avoids extra HTML, but it does not itself establish a new block formatting context for the container.
By contrast, display: flow-root explicitly establishes a block formatting context whose automatic height includes participating floated descendants. It also isolates internal float layout from external floats and prevents child margins from collapsing through the container’s boundary. Older solutions such as overflow: hidden or overflow: auto can also establish a block formatting context, but they may clip content or introduce scrolling. Prefer flow-root when containment is the goal; use clearfix where compatibility constraints require it. For new component layouts, consider Flexbox or Grid instead of floats, while retaining floats for genuine text-wrapping use cases.
Key points to remember
- Use .container { display: flow-root; } for explicit float containment.
- Use .container::after { content: ""; display: block; clear: both; } as a classic clearfix.
- Floats influence text wrapping but are excluded from ordinary normal-flow height calculation.
- Clearfix adds a generated clearing box; flow-root establishes a block formatting context.
- Overflow-based containment can introduce unwanted clipping or scrolling.
Common mistakes candidates make
- Putting clear: both on the parent and expecting it to contain its own floated children.
- Omitting content or a suitable display value from the clearfix pseudo-element.
- Using overflow: hidden automatically without checking whether menus, shadows, or other overflowing content get clipped.
Likely follow-up questions
Why does clear: both on the parent not solve the problem?
The clear property controls a box’s position relative to relevant preceding floats, not its height around floated children. Apply clearing to a generated box after those children, or establish a block formatting context on the parent.
How is flow-root different from overflow: hidden?
Both can establish a block formatting context and contain floats. However, overflow: hidden also clips overflowing content, whereas flow-root provides containment without imposing that overflow behaviour.
Do Flexbox and Grid containers need clearfix?
No, their direct children participate in flex or grid layout, and float does not float those items. A nested ordinary block containing its own floated descendants may still need containment.
Interview tip: Show the flow-root rule first, explain why floats need containment, and then contrast it with the generated clearing box used by clearfix.