The clear property specifies what elements can float beside the cleared element and on which side. It is the primary tool used to fix layout issues caused by float.

The Problem with Floats

When an element is floated, it is taken out of the normal document flow. Following elements will move up and wrap around it. This is great for text wrapping images, but terrible for structural layout, where a footer might suddenly jump up beside a sidebar.

Using clear

The clear property pushes the element down past any floating elements.

• clear: left - The element cannot sit next to left-floating elements.
• clear: right - The element cannot sit next to right-floating elements.
• clear: both - The element cannot sit next to floats on either side.
• clear: none - Default behavior. The element can sit next to floats.

The "Clearfix" Technique

Often, a parent container collapses to zero height if all its children are floating. To fix this, we apply a "clearfix" to the parent, or simply use overflow: auto or display: flow-root. However, explicitly using a cleared element (like an empty div or a pseudo-element) at the end of the container is the classic method.