Definition
A CSS pattern using the ::after pseudo-element to force a container to expand around floated children, preventing layout collapse when floats are taller than surrounding content.
Why It Matters
Without clearfix, container heights collapse around floated elements, leading to broken layouts and overlapping content. It ensures the structural integrity of the parent container in float-based designs.
Core Concepts
- Problem: Floated children can extend below their container’s computed height.
- Solution: Insert a cleared block after content via
::after. - Pattern:
.container::after { content: ""; display: block; clear: both; }. - Alternatives:
display: flow-rooton container; float the container itself withwidth: 100%.