CSS clear

Previous Next

Demo of the different values of the clear property.

Click the property values below to see the result:

clear: none;
clear: left;
clear: right;
clear: both;
This DIV floats left
And this DIV floats right
Below is a 200px DIV with 10px padding and a 30px border. If box-sizing is "border-box", the total width of the DIV element is always 200px, but if box-sizing is "content-box", the total width is 200px plus padding and border = 280px.
This DIV floats left
And this DIV floats right
Below is a 200px DIV with 10px padding and a 30px border. If box-sizing is "border-box", the total width of the DIV element is always 200px, but if box-sizing is "content-box", the total width is 200px plus padding and border = 280px.
This DIV floats left
And this DIV floats right
Below is a 200px DIV with 10px padding and a 30px border. If box-sizing is "border-box", the total width of the DIV element is always 200px, but if box-sizing is "content-box", the total width is 200px plus padding and border = 280px.
This DIV floats left
And this DIV floats right
Below is a 200px DIV with 10px padding and a 30px border. If box-sizing is "border-box", the total width of the DIV element is always 200px, but if box-sizing is "content-box", the total width is 200px plus padding and border = 280px.

Play more with the code in our Tryit yourself editor: Try it Yourself ❯