css notes three: float

1.float definition

1. The original meaning of float is: the text surrounds the picture like water.

2. Features of float

3.Float common use layout

4. The difference between float and others

5.Float matters needing attention

When float and vertical-align coexist, vertical-align becomes invalid.
It is because after using float, the element is removed from the normal flow of the webpage, out of the document flow, and BFC is triggered, and the layout of the element will not be affected by the environment.

6. Other

1. What is BFC?

1. The concept of bfc

   BFC is an isolation container, the child elements inside the container and the outer elements 互不影响;

2. The formation of bfc

   1. Root element
   2. float is not none
   3. position: absolute, fixed
   4. overflow: not visiable
   5. display: inline-block, table-cell, table-caption, flex, inline-flex

3. bfc layout rules

   1. The internal elements are placed vertically.
   2. The margins under the same bfc overlap
   3. Each element is on the left or right, even if it is a float element.
   4. The float box under
   bfc does not overlap. 5. The bfc sub-elements and the outside do not affect each other.
   6. When calculating the height of bfc, floating elements also participate in the calculation.

4. Common use of bfc

   The two-column layout of bfc is compared with floating + margin, and there is no need to calculate the width. (Layout rules 3 and 4)
   Clear internal floats (Layout rule 6)
   Margin overlaps (Layout rule 4)

5. Quoted article: Detailed explanation of bfc principle