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.