In-depth understanding of the use of CSS clear:both

clear:both is used to清除浮動This is the impression I have always had, but I rarely use this, and my understanding is actually not quite correct. I checked the information today and recorded it.

Float out of document flow

The original purpose of float is to achieve text wrapping, which can be understood as partially separating from the document flow.

In CSS, being out of document flow means that the box is taken out of the normal layout and other boxes are placed as if it does not exist. There are two types of separation from the document flow

• Completely out of the document flow: For example position:absolute , using an absolutely positioned box, other boxes, whether themselves or any elements inside them, will ignore this absolutely positioned box for layout.
• Partially out of the document flow: that is, the float box. After using float property, other block boxes will ignore float盒子for layout, but the inline elements and inline-block elements in other boxes will still make room for this floating box.

clear:both

clear:both acts on the box to which the attribute is added

Adding clear:both to a box means that the top border of that box will be低于底外邊距of any floated box that之前it.

So clear:both does not clear the floats, but clears the effects of the floats. The floating boxes are still partially out of the document flow.

The value of clear is left or right. In my opinion, it depends on the floating direction of想要低于的那個浮動盒子. The value of both will be lower than any floating box before it.

Examples of clearing impact

We set up three boxes A, B, and C

When all three boxes are floated left:

When C is not set to float:

Add clear:both/clear:left to B:

As you can see, the floating effect caused by B itself is cleared, and its top border is below任何在他之前的浮動盒子的底部, but the non-floating box C is still below AB, and the font in it makes room for the floating box.

Add a pseudo-element to the parent box::after

Now, we use a div（class:box） to wrap the three boxes ABC, and add a box out outside box , where ABC and out are all set to float. Now they look like this:

Remove the float of out:

This is as it should be.

Add a pseudo element to the box

.box::after{
  clear: both;
  height:10px;
  width:10px;
  background:yellow;
  display: block;
  content: "";
} 

Now the float effect of the outer box out is cleared, but this is not because clear:both clears the float, but because the float effect of after偽元素itself is cleared, and it is now below any floating boxes before it, which also makes the height of box no longer collapse, so out is now just below box , which is the normal document flow.

## Finish

This is a basic knowledge point of CSS, but I have never read it carefully. This time I sorted it out. If there are any mistakes, please correct me if you see this article.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.