Advertisement

Google Ad Slot: content-top

CSS Clear

~1 min read · CSS
On this page

In CSS, the clear property is used to control the behavior of an element that follows a floated element. Specifically, it ensures that the element appears below any preceding floated elements, rather than wrapping around them.


Syntax:

clear: none | left | right | both | inherit;
Example
.div3 { padding: 10px; border: 3px solid red; clear: left; }
Try it yourself

Clearfix:

When working with layouts where floated elements are inside a parent container, clear can be useful to ensure the container expands to fit its floated children.

Example
.clearfix::after { content: ""; clear: both; display: table; }
Try it yourself