CSS Floating cleaning method and its principle summary

In the recent practice of doing imitation station to see each site using floating cleaning methods are different, and even the same Web page has been used to clean up the method, it is time to do a summary of this.

Floating cleanup occurs because the floating element is detached from the normal stream, causing the parent container to not contain floating elements.

We want to be like this:

The result is this:

Looking at the online method, there are two principles:

1. Clean using the Clear property

2. Form the parent container BFC

First, the Clear property:

The meaning of the clear attribute is to prohibit floating elements in a particular direction, for example, Clear:left is not allowed to exist on the left before the document flowFloating elements (note that the left side of the document flow after the existence of a floating element can not be cleaned) according to the CSS authoritative guide, the specific implementation principle is by introducing a clear area, which is equivalent to adding an invisible box to define the clear property of the element downward squeeze, until the element is specified in the direction of no floating element, This appears to contain the box to include the floating box, in fact, the floating box out of the text flow of the nature has not changed, they are still "floating" on the top. Application: 1. Insert an empty label at the end of the parent container <div style= "Clear:both;" ></div> This method is simple and rough, but does not conform to the principle of separation of data and performance, discarded. 2. Using CSS pseudo-elements:

1{2  content: "."; 3   height: 0; 4   Visibility: hidden; 5   Display: block; 6   Clear: both; 7 }

This method is the same as the above principle, except that the inserted action is changed from CSS to complete.

Adding this class to the parent container adds an invisible block-level element at the end of the parent container with a height of 0, with clear properties.

Besides BFC:

The main use of BFC to clean up floats is its layout rules:

1. The inner box is placed vertically, one by one.
2. The vertical distance of the box is determined by margin. The margin of two adjacent boxes that belong to the same BFC overlap
3. The left side of each element's margin box is in contact with the left side of the containing block border box (or vice versa for formatting from left to right). This is true even if there is a float.
4. The BFC area does not overlap with the float box.
5. BFC is a separate, isolated container on the page, and the child elements inside the container do not affect the outer elements. The reverse is true.
6. When calculating the height of the BFC, floating elements are also involved in the calculation

Floating cleanup is mainly the sixth rule, as long as the parent container is triggered as BFC, the included effect can be achieved.

So what are the different ways to trigger BFC?

1. root element
2. The Float property is not none
3. Position for absolute or fixed
4. Display for Inline-block, Table-cell, Table-caption, Flex, Inline-flex
5. The overflow is not visible

This explains the w3school above by adding Overflow:auto to the parent container, or Overflow:hidden to clear the float.

The fact is that the parent container is fired as BFC, causing it to calculate the height of the floating element.

Understanding this principle, you can know to add position:absolute to the parent container, or the other satisfies the trigger BFC condition can also achieve the purpose of clear float.

CSS Floating cleaning method and its principle summary