clear

style.css

/* no clearing (initial value) */
.item { clear: none;}

/* clear wrapping caused by left-floated elements */
.after-left-float { clear: left;}

/* clear wrapping caused by right-floated elements */
.after-right-float { clear: right;}

/* clear wrapping caused by both left and right floats */
.clearfix-item { clear: both;}

/* common pattern: footer clears floated sidebar and main content */
.sidebar { float: left; width: 30%;}
.main-content { float: right; width: 65%;}
.footer { clear: both;} /* footer is placed below both sidebar and main content */

<div style="float: left; width: 200px; background-color: #ff0;">This is a div element with 'float: left' and 'width: 200px'.</div>
<p style="clear: left;">This is a p element. 'clear: left' is specified to clear the wrapping from the preceding floating element.</p>

<div style="float: right; width: 200px; background-color: #ff0;">This is a div element with 'float: right' and 'width: 200px'.</div>
<p style="clear: right;">This is a p element. 'clear: right' is specified to clear the wrapping from the preceding floating element.</p>

<div style="float: left; width: 200px; background-color: #ff0;">This is a div element with 'float: left' and 'width: 200px'.</div>
<p style="clear: both;">This is a p element. 'clear: both' is specified to clear the wrapping from the preceding floating element.</p>

Desktop

Chrome

1+ ○

Firefox

1+ ○

Safari

1+ ○

Edge

12+ ○

IE

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

3.5+ ○

2 and earlier ×

Mobile

iOS Safari

1+ ○

Android Browser

4.4+ ○

3 and earlier ×

Chrome Android

Latest ○

Same support as desktop

Firefox Android

Latest ○

Same support as desktop

※ Version data based on MDN.

Clears the wrapping around floated elements (floating elements) that exist before it.

Strictly speaking, it does not simply clear the wrapping around preceding floating elements — it automatically generates upward margin equal to the height of the preceding floating element. This automatically generated upward margin is called 'clearance'. Note that if both the 'clear' property and the 'margin-top' property are specified simultaneously, the 'clearance' generated by the 'clear' property takes precedence.

<div style="float: left; width: 200px; background-color: #ff0;">This is a div element with 'float: left' and 'width: 200px'.</div>
<p style="clear: both; margin-top: 1000px;">This is a p element with 'clear: both' and 'margin-top: 1000px'. Because 'clearance' takes precedence, the top margin will not become '1000px'.</p>