A detailed introduction to CSS Floats

1. The standard flow is the way the default layout of the browser is, that is, from the top down to the left-to-right default schedule layout.

2. Layout method

2.1 The nature of floating: Solve the problem of formatting the picture with the text side-by.

* When the element floats, it is detached from the standard flow and affects its layout.

2.1.1 Not set before floating (before):

　　

2.1.2. After setting the float (after)

　　

* {                padding:0;                margin:0;            }            . box1 {                width:50px;                height:40px;                Background-color: #AFEEEE;                border:2px solid #3C3C3C;                Float:left;            }                        . Box2 {                width:300px;                height:300px;                Background-color: #ADFF2F;                border:2px solid #3C3C3C;                            }

* Floating elements do not occupy the space of the standard flow. However, it affects the layout of the text in the standard stream.

3. Characteristics of floating

3.1. Floating out of the standard stream, without occupying a position, will affect the standard flow. Floats only floating around.

3.2. Floating element A arranges position, which is related to the previous element (block level). If the previous element has a float, the top of the A element is aligned with the top of the previous element, and if the previous element is a standard flow, the top of the A element is aligned with the bottom of the previous element.

3.3. A child box inside a parent box, if one of the children has a float, the other children need to float in order to line up the display.

3.4. The float is displayed according to the position the element is written in.

3.5. When the element is added floating, if no width is set, the element will have the attribute of the inline block element. The size of the element depends entirely on the size of the definition or the default content, which is a wrapper.

3.6. Floating is destructive: After the element floats, it destroys the original normal flow layout and causes the content to collapse.

Note: If the parent box of a standard stream is not set high and all the child boxes are floating, the height of the parent box collapses to 0;

4. Solve the problem of high collapse caused by floating damage

4.1.overflow method: Set the Overflow:hidden on the parent box; (Make it wrap)

　　

<!        DOCTYPE html>

5. Supplement: BFC

Overflow can trigger elements of the BFC, you can let the elements have separate layout of the space and permissions, in the BFC all the elements are based on the parent elements of the composition and layout, all the parent elements are wrapped, this is to solve the problem of high collapse principle.

For example: Floating can also trigger BFC, and then: positioning, overflow, display:table, Table-cell ...

6. Alleys: The core display area of the website, the General center display. Width: 960px 980px 1000px 1190px 1200px;

7. Floating clear: The element is displayed in the standard stream only if there are no floating elements on either side of the current element.

Clear:left/right/both;