Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

clear

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

Sample Code

div.test { float: none;}
div.test1 { float: left;}
div.test2 { float: right;}

Available Values

Value	Description
none	Does not clear the wrapping around floating elements that exist before it. This 'none' is the initial value.
both	Clears all wrapping around floating elements that exist before it.
left	Clears the wrapping around floating elements before it whose 'float' property is set to 'left'.
right	Clears the wrapping around floating elements before it whose 'float' property is set to 'right'.

Browser Preview

<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>

Browser Support

Desktop

Chrome

1+ ○

Firefox

1+ ○

Safari

1+ ○

Edge

12+ ○

Supported in all versions

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.

Overview

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>

If you find any errors or copyright issues, please contact us.

Home