Floating clear floating (IMPACT)

I. Floating

In-depth research, explanation and expansion of CSS float (1) Details of CSS float attributes

Block-level element exclusive row

Block-level elements, which are unique on the pageOccupies one row, Arranged from top to bottom, that is, the legendStream.

As you can see,Even ifDiv1 has a very small width. A line on the page can contain div1 and div2, and div2 is not placed behind div1, because the DIV element occupies an exclusive line.

Note that the above theories refer to the DIV in the standard stream. No matter how complicated the layout is, the basic starting point is:"How to display multipleDivElement".

Floating

Floating: The floating box can move left and right until its outer edge encountersInclude boxOr another floating boxEdge.

A floating box does not belong to a normal stream in the Document. When an element floats, it does not affect the layout of block-level boxes, but only the arrangement of inline boxes (usually text, the normal stream in the document will behave like the floating box does not exist. When the floating box height exceeds the include box, in this case, the contained box does not automatically extend to close the floating element (the "height collapse" phenomenon ). As the name suggests, it is just floating on a normal stream, just like a floating cloud, but only floating around.

Obviously, the standard stream can no longer meet the requirements, so floating is required. Floating can be understood as letting a divElements are separated from the standard stream and float above the standard stream. They are not at the same level as the standard stream.

Important conclusion:

Assume that a div ElementA is floatingIf the last element of Element A is floating, element a followsBack(If one row does not fit the two elements, element A will be squeezed into the next row); if an element on Element A is an element in the standard stream, then a'sRelatively verticalThe location will not change (because the block-level element in the standard stream isExclusive row), That is, the top of a is always aligned with the bottom of the previous element.

We can see that:

Elements are arranged vertically in the standard stream, and can be understoodHorizontal.

Ii. Clear floating (IMPACT)

Clear float can be understoodBreak horizontal arrangement.

The purpose of clearing floating isSolving High collapse.

Why is the height collapsed? When will the height collapse? The cause of collapse is that the element contains floating properties-destroy inline box-destroy line box height-No height-collapse.

When will it collapse: the elements in the label collapse as long as they do not have the actual height.

Clear floating:

3.1 add additional tags

Add an empty label at the end of the floating element, for example, <Div style = "clear: both"> </div>, and other labels such as BR.

3.2 use the BR tag and its own HTML attributes

<Br clear = "all"/>

3.3 set overflow: hidden for the parent Element

Set the overflow value of the parent element to hidden (BFC is triggered in a browser that supports BFC). in IE6 and IE7, haslayout needs to be triggered, for example, Zoom: 1.

3.4 set the overflow: auto attribute for the parent Element

The parent element sets the overflow: auto attribute (BFC is triggered in a browser that supports BFC). Similarly, IE6 and IE7 need to trigger haslayout,

3.5 The parent element is also set to float

3.6 set display: Table for the parent Element

3.7 Use: After pseudo element

Two methods to clear floating:

Through comparison, we can easily find that the methods listed above are nothing more than two types:

First, add an empty element at the end of the floating element and set the clear: Both attribute, the After pseudo element is actually a block-level element with the content generated after the element as a vertex;

Second, the floating is closed by setting the parent element overflow or the display: Table attribute. Let's discuss the principles described here. (BFC or haslayout is triggered)

After pseudo-element clearing floating highlights

1 .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }2 .clearfix { *zoom:1; }

1) display: blocks display the generated elements at the block level, occupying the remaining space;

2) Height: 0 to prevent the height of the original layout from being damaged by the generated content.

3) visibility: hidden makes the generated content invisible and allows you to click and interact with the content that may be covered by the generated content;

4) use content: "." To generate the content as the last element.ContentYes or others. For example, there is a classic content in oocss: "XXXXXXXXX". In some versions, the content in the content may be blank. It is not recommended to do this if it is cool, firefox will still generate additional gaps until 7.0 content;

5) ZOOM: 1 triggers ie haslayout.

Analysis shows that,BesidesClear: Both is used to close the float. Other code is used to hide the content generated by the content. This is why other versions of closed float have Font-size: 0, line-height: 0.

Optimization solution 1:

1. clearfix: After {content: "\ 200b"; display: block; Height: 0; clear: Both;} 2. clearfix {* ZOOM: 1;/* IE6 IE7 triggers haslayout */}.

The code of the method that closes the floating with null tags seems to be somewhat redundant. Unicode is found through queries.CharacterThere is a"Zero-width Space", That is, U + 200b. The character itself is invisible, so we can omit visibility: hidden.

Optimization solution 2:

1 /* For modern browsers */2 .cf:before,.cf:after {3 content:"";4 display:table;5 }6 .cf:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */7 .cf { zoom:1; }

The above method uses the before pseudo element. Many people are confused about this. When should I use before? Why does solution 1 fail? In fact, it is used to deal with the overlap of the margin. Because the internal element float creates BFC, the margin-top of the internal element overwrites the margin-bottom of the previous box. If this is not what you want, you can add before. If it is just closed and floating, after is enough!

 

 

 

 

 

 

 

 

 

Floating clear floating (IMPACT)