Talk about floating

1. An element will leave the standard flow after floating , Don't occupy a place , The standard stream typesetting is divided into levels （ inline + In line block level ） And vertical （ Block level ）, Floating stream typesetting has only horizontal typesetting , Only one element can be left aligned or right aligned , Not centered , So you can't use margin：0 auto 了

2. Block level elements are no longer distinguished in floating flow layout / Inline elements / In line block level elements , They are all horizontal , And you can set the width and height , So after an element is set to float , It is very similar to the block level element in the row （ Horizontal layout , Width and height can be set ）

3. Floating elements will break away from the standard flow , After bid failure , The latter element will float up to replace the empty position of the former element , The front element floats to the left and covers the rear element , The position of a floating element after it floats , Determined by the position of the floating element in the standard stream before it floats

4. Floating elements have the phenomenon of sticking , If the parent element is wide enough to display all floating elements , Then the floating elements will be displayed side by side , If the width is insufficient , It will stick forward from the last element , If there is insufficient space , The newline will be pasted to the left or right of the parent element

5. Floating elements have word enclosing phenomenon , Floating elements do not block text without floating elements , No floating text will automatically give the floating element a position , Achieve the effect of text around the picture

6. How to clear the float to solve the height collapse problem of the parent element of the floating element

   The content of the element in the standard flow can support the height of the parent element box , But floating elements cannot be supported

（1） Set the height of the parent element （ To use less , Because it is difficult to determine the specific height ）
（2） Add clear attribute

none: The default value , Sort according to the sorting rules of floating elements
left: Don't look for the front left floating element right: Don't look for the front right floating element both: Don't look for the front left floating element and right floating element ）, But it may cause margin Failure of value , Because I can't find the same object .

（3） Add a pseudo class to the end of the previous element

.box1::after {
    
            content: '';
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        }

benefits ： You can set the first box margin-bottom, You can set the second box margin-top, And it can support the height of the first box , Do style and structure separation

（4）overflow：hidden

After adding this , The height of the parent is adaptive with the height of the child container and child content , But in ie6 Invalid in , You need to add *zoom:1.

Add ：overflow：hidden Three functions of ：
1. To hide beyond
2. Remove the floating
3. Solve the problem of collapse of outer margin , Set the parent element o：h, Child element settings margin-top after , The parent element will not be pushed down