CSS floating, css clear floating

CSS floating, css clear floating

1. The standard stream is the default layout of the browser, that is, the default shift layout from top down to left to right.

2. Layout

2.1 floating nature: solves the problem of image and text format side by side.

* When an element floats, it is out of the standard stream and affects its layout.

2.1.1 before floating (before) is not set ):

　　

 

2.1.2. after floating)

　　

　　

 1 * { 2                 padding: 0; 3                 margin: 0; 4             } 5  6             .box1 { 7                 width: 50px; 8                 height: 40px; 9                 background-color: #AFEEEE;10                 border: 2px solid #3C3C3C;11                 float: left;12             }13             14             .box2 {15                 width: 300px;16                 height: 300px;17                 background-color: #ADFF2F;18                 border: 2px solid #3C3C3C;19                 20             }

* Floating elements do not occupy the space of the standard stream. However, the text layout in the standard stream is affected.

3. Floating Characteristics

3. 1. Float disconnects from the standard stream and does not occupy the position. This will affect the standard stream. Float only float left and right.

. The position of floating element A is related to the last element (block level. If the previous element is floating, the top of Element A is aligned with the top of the previous element. If the previous element is A standard stream, the top of Element A is aligned with the bottom of the previous element.

3. A child box in a parent box. If one of the Child boxes has a floating level, all the other child levels need to be floating in order to display one row in alignment.

. Float displays the corresponding float based on the position of the element.

. After an element is added to a float, if the width and height are not set, the element will have the characteristics of block elements in the row. The size of an element depends on the defined size or the default content.

. Float is destructive: After an element floats, the original normal flow layout is damaged, resulting in content collapse.

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

4. Solve the high collapse problem caused by floating destructiveness

4.1.overflow method: Set overflow: hidden on the parent box (to make it package)

　　

1 <! DOCTYPE html> 2 
 
5. Supplement: BFC
Overflow can trigger the BFC of an element, so that the element has independent typographical space and permissions. In bfc, all elements are typeset and laid Based on the parent element, all parent elements have encapsulation, which is the principle to solve the high collapse problem.
For example, floating can also trigger bfc, And then: positioning, overflow, display: table, table-cell...
6. Moderator: the Core display area of the website, usually centered. Width: 960px 980px 1000px 1190px pixel PX;
7. Floating clear: the elements are displayed in the standard stream only when no floating element exists on both sides of the current element.
* ******** Clear: left/right/both;