Detailed explanation
The CSS float property places an element against the left or right side of its containing block, allowing surrounding inline content, such as text, to wrap around it. Its classic use is an image inside an article: img { float: left; margin-right: 10px; } places the image on the left and leaves space between it and the text. Before Flexbox and Grid became available, developers also used floats to build columns and page layouts, although floats were not designed as a general-purpose layout system.
Under the hood, a floated box is taken out of normal flow, but it still influences nearby line boxes. Text lines become shorter to avoid overlapping the float, and wrapping continues until the text passes its bottom edge. This differs from absolute positioning, which does not make surrounding text wrap. A float moves sideways as far as available space permits; if it cannot fit beside an earlier float, it moves downward. Consequently, float-based columns can unexpectedly drop to another row when their widths, margins, padding, or borders exceed the available width.
The main containment problem is that an ordinary parent's automatic height does not include its floated children. If it contains only floats and establishes no special formatting context, its content height can therefore be zero; padding, borders, or other in-flow content may still give it visible height. Backgrounds and borders may appear collapsed, while subsequent content can wrap beside floats instead of appearing below them. The clear property moves a following block below earlier floats on the specified side. A clearfix uses an in-flow pseudo-element—.clearfix::after { content: ""; display: table; clear: both; }—to make the parent extend below its floats.
For modern float containment, display: flow-root on the parent establishes a block formatting context that includes its floats in automatic height calculation. Using overflow: hidden can also establish containment, but may unintentionally clip content. Prefer Flexbox for one-dimensional layouts and Grid for two-dimensional layouts; retain floats when text wrapping is the actual requirement. Interviewers look for this distinction, an accurate explanation of parent-height behaviour, and knowledge of both clearfix and modern containment.
Key points to remember
- Use float primarily to wrap text around images or other small content boxes.
- Floats leave normal flow but still affect the space available to surrounding text lines.
- An ordinary parent's automatic height excludes floated children, potentially collapsing its content height.
- Use clear to move following content below floats; use clearfix or display: flow-root to contain floats.
- Prefer Flexbox and Grid for page layouts, alignment, and responsive columns.
Common mistakes candidates make
- Saying floats have no effect on surrounding content because they leave normal flow.
- Claiming every parent containing floats has zero height, regardless of other content or formatting context.
- Using overflow: hidden as a universal fix without considering clipping, or choosing floats for modern column layouts.
Likely follow-up questions
What is the difference between clear: both and display: flow-root?
clear: both moves a block below relevant earlier left and right floats; applying it to the parent does not automatically contain that parent's floated children. display: flow-root establishes a new block formatting context, so the parent's automatic height accounts for its floats.
How does the clearfix pseudo-element prevent parent collapse?
The ::after pseudo-element creates a generated box after the parent's content. With clear: both, that in-flow box is positioned below the floats, making the parent's automatic height extend below them.
Why not replace every float with Flexbox?
Flexbox arranges items along an axis, but it does not make paragraph text wrap around an image and then continue beneath it. Floats remain appropriate for that editorial wrapping effect, while Flexbox is better for aligning and distributing layout items.
Interview tip: Start with the text-wrapping use case, explain the parent-height problem, and finish by contrasting clearfix with flow-root and modern layout tools.