Clear float-full explanation (from the online excerpt-the float we cleared together in those years)

Clear float-full explanation (from the online excerpt-the float we cleared together in those years)
1. Clear floating and closed floating

Clear float indicates that the display is correct. This avoids the feature of automatically encapsulating floating elements in the Document Stream (the common feature is to set the clear: both; attribute in the footer part );

Closed floating does solve the problem of height collapse, so that the wrap element has a height. Suspicious package into floating element. Therefore, closed floating is more suitable.

Ii. Principle of closed floating there are many common methods to clear floating, which can be divided into two types

So what is the principle? before that, you need to know about it first.HasLayout and Block formatting contexts.

Block formatting contexts refers to Block-level formatting context (BFC.

So how to trigger BFC?

• Float values except none
   
• Value (hidden, auto, scroll) other than visible in overflow)
   
• Display (table-cell, table-caption, inline-block)
   
• Position (absolute, fixed)
   
• Fieldset Element

Note that the display: table itself does not create BFC, but it will generate an anonymous box (anonymous boxes), while the display: table-cell in the anonymous box can create a new BFC, in other words, the anonymous box instead of display: table is used to trigger block-level formatting. Therefore, the effect of BFC created through display: table and display: table-cell is different.

The fieldset element does not have any information about this trigger behavior in www.w3.org until it is available in the HTML5 standard. Some browsers, bugs (Webkit, Mozilla), mentioned this trigger, but there is no official statement. In fact, even if fieldset can create block-level formatting contexts in most browsers, developers should not take this for granted.CSS 2.1 does not define which attributes apply to Form Controls, nor does it define how to use CSS to add styles to them. The user agent may apply CSS attributes to these attributes. It is recommended that developers regard this support as an experimental feature. Higher CSS versions may further regulate this feature.

 

Features of BFC:

1) block-level formatting context prevents overlay of the outer margin

When two adjacent block boxes are in the same block-level formatting context, the vertical margin between them is superimposed. In other words, if the two adjacent block boxes do not belong to the same block-level formatting context, their margins will not overlap.

2) block-level formatting context does not overlap floating Elements

According to regulations, the border of a block-level formatting context cannot overlap the outer margin of its elements. This means that the browser will create an implicit margin for the block-level formatting context to prevent it from overlays with the floating element margin. For this reason, when a negative margin is added to a block-level formatting context, it does not work (Webkit and IE6 have a problem at this point-you can refer to this test case ).

3) block-level formatting context can usually contain floating

For details, see W3C CSS2.1-10.6.7 'auto' heights for block formatting context roots.

In general, the element that creates BFC is an independent box. The child elements in the box do not affect the elements outside the layout, and vice versa, at the same time, BFC is still a common stream in the document.

So far, you may understand why overflow: hidden or auto can be closed and float, because the parent element creates a new BFC. I think it is not rigorous and there is no basis for Zhang xinxu's article understanding of overflow and zoom "Clear floating" to explain the principle of closed floating with a package. In addition, "Firefox and other browsers do not have the concept of haslayout", so modern browsers have BFC. In terms of performance, hasLayout can be equivalent to BFC.

The IE6-7's Display engine uses an internal concept called layout, which directly leads to many display bugs in the IE6-7 due to its many defects. When we say an element "Get layout", or an element "own layout", we mean its Microsoft proprietary attribute hasLayout http://msdn.microsoft.com/worksh... rties/haslayout. asp is set to true for this purpose. The IE6-7 uses the concept of layout to control the size and positioning of elements, and those with the layout (have layout) are responsible for the size setting and positioning of themselves and their child elements. If the hasLayout value of an element is false, its size and position are controlled by the ancestor element with the most recent layout.

Conditions for triggering hasLayout:

• Position: absolute
   
• Float: left | right
   
• Display: inline-block
   
• Width: any value except "auto"
   
• Height: any value except "auto" (for example, height: 1% is used when many people clear the float)
   
• Zoom: any value except "normal" (MSDN) http://msdn.microsoft.com/worksh... properties/zoom. asp
   
• Writing-mode: tb-rl (MSDN) http://msdn.microsoft.com/worksh... ies/writingmode. asp

In IE7, overflow also becomes a layout trigger:

• Overflow: hidden | scroll | auto (this attribute did not trigger layout in earlier versions of IE. )
   
• Overflow-x |-y: hidden | scroll | auto (attributes in the CSS3 box model are not widely supported by browsers yet. They did not trigger layout in earlier IE versions)

For more detailed explanations of hasLayout, see the well-knownOn having layoutAn article (English: http://www.satzansatz.de/cssd/onhavinglayout.htm), because the old9 blog by the wall, Chinese Version address:

IE8 uses a brand new Display engine. It is said that the hasLayout attribute is not used, so it solves many bad bugs.

To sum up: in a browser that supports BFC (IE8 +, firefox, chrome, safari) by creating a new BFC closed floating; in a browser that does not support BFC (IE6-7 ), by triggering hasLayout, the float is closed. Iii. Closed Floating Method-keep improving

The above lists seven closed floating (Seventh: after pseudo element) methods. Through the analysis in section 3, we find that more: display: table-cell, display: inline-block, etc. can be closed and floating as long as the BFC attribute value is triggered. Compared from various aspects, the closed floating of the after pseudo elements is undoubtedly a relatively better solution. The method is described in detail below.

. Clearfix: after {content: "."; display: block; height: 0; visibility: hidden; clear: both ;}

. 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 :". "The generated content is the last element. It can be vertices or other elements in content. For example, oocss contains the classic content:" XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX ", in some versions, the content may be blank, and it is not recommended to do this if it is cold. firefox will still generate additional gaps until 7.0 content;

5) zoom: 1 triggers IE hasLayout.

After analysis, we found that except for clear: both, other code is used to hide the content generated by the content, which is why other versions of closed floating have font-size: 0, line-height: 0.

 

Optimization solution 1:

The code of the method with the empty tag closed and floating seems to be somewhat redundant. It is found through the query that there is a "zero-width space" in the Unicode character, that is, U + 200B, this character is invisible, so we can omit visibility: hidden.

. Clearfix: after {content: "\ 200B"; display: block; height: 0; clear: both ;}

. Clearfix {* zoom: 1 ;}.

Optimization solution 2:

Proposed by Nicolas Gallagher, original article: A new micro clearfix hack, this method does not have any gaps in firefox.

/* For modern browsers */

. Cf: before,. cf: after {

Content :"";

Display: table;

}

. Cf: after {clear: both;}/* For IE 6/7 (trigger hasLayout )*/

. Cf {zoom: 1 ;}

Note that:

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! Not as mentioned in the desert Clear Float article: but when we only use clearfix: after, there will be a vertical margin overlay bug in cross-browser compatibility. This is not a bug, is what BFC should have.

Please refer to the elegant Demo

For more information, see clearfix improvement and overflow: hidden explanation.

In actual development, solution 1 is improved because Unicode characters are not suitable for pages embedded with CSS GB2312 encoding. Solution 7 can completely solve our needs, solution 2 is awaiting further implementation. Solution 3 and 4 closed the floating through overflow. In fact, a new block-level formatting context has been created, which will lead to a series of changes in its layout and behavior relative to the floating, clearing floating is only a function of a series of changes. Therefore, it is unwise to change the global characteristics by closing the float. The risk is a series of bugs, such as the focus generated in earlier versions of firefox and the layer with absolute positioning truncated. Always understand that if you only need to close the float, overflow should not be used, rather than the "use with caution" mentioned in some articles ".

It took three days to write this article. If this article is helpful to you, your message is my greatest support. At the same time, due to limited energy, you are welcome to point out the errors and deficiencies in this article!

References:

 

• Page breaks and block-formatting contexts: Allowed page breaks (13.3.3)
• Clearfix and block formatting contexts: Everything you Know about Clearfix is Wrong

• Block formating contexts, "hasLayout"-IE Window vs CSS2.1 browsers: simulations.
• New block formatting contexts next to floats
• Control Block Formatting Context

• On having layout, [translation] On having layout http://old9.blogsome.com/2006/04/11/onhavinglayout
• "HasLayout" Overview
• HasLayout Property
• IE hasLayout
• Https://developer.mozilla.org/en/CSS/block_formatting_context