clear
Quick Summary for clear
The clear CSS property sets whether an element must be moved below (cleared) floating elements that precede it. The clear property applies to floating and non-floating elements.
Code Usage for clear
#container::after {   content: "";   display: block;   clear: both; } 
More Details for clear

clear

The clear CSS property sets whether an element must be moved below (cleared) floating elements that precede it. The clear property applies to floating and non-floating elements.

When applied to non-floating blocks, it moves the border edge of the element down until it is below the margin edge of all relevant floats. The non-floated block's top margin collapses.

Vertical margins between two floated elements on the other hand will not collapse. When applied to floating elements, the margin edge of the bottom element is moved below the margin edge of all relevant floats. This affects the position of later floats, since later floats cannot be positioned higher than earlier ones.

The floats that are relevant to be cleared are the earlier floats within the same block formatting context.

Note: If an element contains only floated elements, its height collapses to nothing. If you want it to always be able to resize, so that it contains floating elements inside it, you need to self-clear its children. This is called clearfix, and one way to do it is to add clear to a replaced ::after pseudo-element on it.

#container::after {   content: "";   display: block;   clear: both; } 

Syntax

/* Keyword values */ clear: none; clear: left; clear: right; clear: both; clear: inline-start; clear: inline-end;  /* Global values */ clear: inherit; clear: initial; clear: revert; clear: unset; 

Values

none

Is a keyword indicating that the element is not moved down to clear past floating elements.

left

Is a keyword indicating that the element is moved down to clear past left floats.

right

Is a keyword indicating that the element is moved down to clear past right floats.

both

Is a keyword indicating that the element is moved down to clear past both left and right floats.

inline-start

Is a keyword indicating that the element is moved down to clear floats on start side of its containing block, that is the left floats on ltr scripts and the right floats on rtl scripts.

inline-end

Is a keyword indicating that the element is moved down to clear floats on end side of its containing block, that is the right floats on ltr scripts and the left floats on rtl scripts.

Formal definition

Initial valuenone
Applies toblock-level elements
Inheritedno
Computed valueas specified
Animation typediscrete

Formal syntax

none | left | right | both | inline-start | inline-end

Examples

clear: left

HTML
<div class="wrapper">   <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>   <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>   <p class="left">This paragraph clears left.</p> </div> 
CSS
.wrapper{   border:1px solid black;   padding:10px; } .left {   border: 1px solid black;   clear: left; } .black {   float: left;   margin: 0;   background-color: black;   color: #fff;   width: 20%; } .red {   float: left;   margin: 0;   background-color: pink;   width:20%; } p {   width: 50%; } 

clear: right

HTML
<div class="wrapper">   <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>   <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>   <p class="right">This paragraph clears right.</p> </div> 
CSS
.wrapper{   border:1px solid black;   padding:10px; } .right {   border: 1px solid black;   clear: right; } .black {   float: right;   margin: 0;   background-color: black;   color: #fff;   width:20%; } .red {   float: right;   margin: 0;   background-color: pink;   width:20%; } p {   width: 50%; } 

clear: both

HTML
<div class="wrapper">   <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.</p>   <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>   <p class="both">This paragraph clears both.</p> </div> 
CSS
.wrapper{   border:1px solid black;   padding:10px; } .both {   border: 1px solid black;   clear: both; } .black {   float: left;   margin: 0;   background-color: black;   color: #fff;   width:20%; } .red {   float: right;   margin: 0;   background-color: pink;   width:20%; } p {   width: 45%; } 

Specifications

Specification
CSS Logical Properties and Values Level 1 # float-clear

See also

CSS basic box model

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語한국어PolskiPortuguês (do Brasil)Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
The happiest People don't have the best of everything, they just make the best of everything.
Unknown
Random CSS Property

:host()

The :host() CSS pseudo-class function selects the shadow host of the shadow DOM containing the CSS it is used inside (so you can select a custom element from inside its shadow DOM) — but only if the selector given as the function's parameter matches the shadow host.
:host() css reference