CSS clear usage introduction

 clear is used to clear the floating elements on the side of an element. Assuming that two div blocks use floating ( CSS float ) and are side by side, if you want these two elements not to be side by side, you can use clear to declare Clear the CSS float floating effect, as shown in the sample picture below.

For the blue block on the left and the green block on the right, we use float so that the left and right blocks can be lined up horizontally. If you don’t need the green block to float to the right of the blue block, it can be in the green zone. Adding clear:left to the style of the block means that the floating block on the left of the green block is cleared, and the rendering effect will look like the following.



When the green block uses clear to clear the floating block on the left, it is equivalent to invalidating float:left, and it will naturally be arranged below!

CSS clear syntax example

box {
　float:left;
　clear:left;
}

This example means to clear the floating element on the left of the box block.

The possible values ​​of CSS clear are left (clear the floating block on the left), right (clear the floating block on the right), both (clear the floating block on both sides), none (the default is this, and both sides can have floating blocks). There is inherit, but because of IE's support, I am not using the inherit value.