CSS clear Property

The clear property controls whether an element is allowed to sit beside preceding floated boxes or must be moved down below them. It is most often used to stop an element from wrapping alongside floats so that it begins on a new horizontal band in the flow of the document. By specifying which sides should be cleared, authors can force a block-level element to resume the normal flow below earlier floats rather than sharing the same inline space.

When an element with clearing behavior is laid out, the user agent examines the floats that precede it in the same block formatting context and shifts the element’s outer edge so it no longer overlaps those floats it is required to clear. This shifting does not change the document’s source order - it is purely a layout adjustment - and it does not itself create a new block formatting context. Because of that, clearing is frequently used in combination with other layout techniques; for example, using float to take content out of normal flow and then applying clearing to subsequent blocks to control where normal-flow content resumes. Also note that certain properties that establish a block formatting context can change how floats interact with surrounding content, so overflow is often considered when managing float containment.

In practice, developers use clearing to ensure parent containers expand around floated children or to prevent following content from flowing beside floats. Common patterns include inserting an element solely to clear preceding floats or using generated content with pseudo-elements as a “clearfix” so the parent contains its floated children. Because the effect concerns vertical placement relative to floats, it also interacts with spacing and layout decisions made with display and margins; combining clear with block-level display and appropriate margin settings gives predictable separation between floated regions and subsequent blocks.

There are a few edge cases to be aware of: absolutely positioned elements and elements removed from normal flow by other means are not affected by clearing in the same way as regular block-level boxes, so mixing clearing with positioning requires care. When designing layouts, consider how cleared elements will interact with stacking contexts and replaced elements that produce floats, and prefer clear-based techniques when you need a simple, reliable way to force an element below preceding floats rather than reworking the document structure. For fine-grained control alongside cleared placement, authors often combine clearing with positioning strategies such as position when absolute or fixed placement is also required.