Clear float--full interpretation (excerpt from the Net--the float we cleared together over the years)

first, clear floating and closed floating

The so-called clear float refers to the correct display. Avoid the automatic wrapping of document flow characteristics of floating elements (common is the footer section set clear:both; attributes);

The closed float, which does solve the problem of height collapse, makes the wrap element highly. Suspicious package into the floating element. So it's more appropriate to call it a closed float.

Two, the principle of closed floating commonly used to clear floating method has many, can be divided into a series of

1. Add an empty element at the end of a floating element, set the Clear:both property
2. Parent element set overflow or display:table;

So what is the rationale for this, before you need to know about haslayout and Block formatting contexts.

The so-called block formatting contexts refers to the chunk-level formatting context, referred to as BFC.

So how do you trigger BFC?

• Float value other than none
  
• Overflow values other than visible (Hidden,auto,scroll)
  
• Display (Table-cell,table-caption,inline-block)
  
• Position (absolute,fixed)
  
• FieldSet elements

Note that display:table itself does not create BFC, but it generates an anonymous box (anonymous boxes), and Display:table-cell in the anonymous box can create a new BFC, in other words, The block-level formatting context is triggered by an anonymous box, not display:table. So the BFC effect created by display:table and Display:table-cell is not the same.

The fieldset element does not currently have any information about the triggering behavior in www.w3.org until the HTML5 standard appears. Some browsers bugs (Webkit,mozilla) mention the triggering behavior, but there is no official statement. In fact, even if fieldset can create a new block-level formatting context on most browsers, developers should not take it for granted.CSS 2.1没有定义哪种属性适用于表单控件，也没有定义如何使用CSS来给它们添加样式。用户代理可能会给这些属性应用CSS属性，建议开发者们把这种支持当做实验性质的，更高版本的CSS可能会进一步规范这个。

Features of the BFC:

1) block level formatting context blocks margin overlays

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

2) block-level formatting contexts do not overlap floating elements

As a rule, the bounding rectangle of a block-level formatting context cannot overlap the margins of the elements inside it. This means that the browser will create an implicit margin for the block-level formatting context to prevent it from overlapping the margin of the floating element. For this reason, it will not work when you add a negative margin to a block-level formatting context that is next to floating (WebKit and IE6 have a problem at this point-you can see this test case).

3) block-level formatting contexts can often contain floating

See: css2.1-10.6.7 ' Auto ' Heights for block formatting context roots

In layman's terms: the element that created the BFC is a separate box in which the child elements do not affect the outside elements on the layout, and vice versa, while BFC still belong to the normal flow in the document.

At this point, you may understand why Overflow:hidden or auto can be closed because the parent element creates a new BFC. For Zhang Xin Xu in the "Overflow and zoom" clear floating "of some understanding" in the article to use the package to explain the principle of closed floating, I think is not rigorous, and there is no basis. and said "Firefox and other browsers do not have the concept of haslayout", then the modern browser is BFC, from the performance, Haslayout can be equated with BFC.

Ie6-7 's display engine uses an internal concept called layout, which, due to the many flaws in the display engine itself, leads directly to many of the ie6-7 's display bugs. When we say an element "get layout", or an element "has layout", we mean it's Microsoft proprietary properties Haslayout Http://msdn.microsoft.com/worksh ... rties/ Haslayout.asp is set to true for this purpose. Ie6-7 uses the concept of layout to control the size and positioning of elements, and those elements that have layouts (with layout) are responsible for the sizing and positioning of their own and their child elements. If the haslayout of an element is false, its size and position are controlled by the ancestor element that recently owns the 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, many people will use height:1% to 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 property does not have the ability to trigger layout in previous versions of IE.) ）
  
• Overflow-x|-y:hidden|scroll|auto (attributes in the CSS3 box model have not yet been widely supported by the browser.) They also did not trigger layout in the previous IE version)

Haslayout For more detailed explanations see the famous "on have layout" article of OLD9 translations (in English: http://www.satzansatz.de/cssd/ onhavinglayout.htm), due to OLD9 blog by wall, Chinese version address:

IE8 used a new display engine, allegedly not using the Haslayout attribute, and thus solved a lot of hated bugs.

In summary: In support of the BFC Browser (Ie8+,firefox,chrome,safari) by creating a new BFC closed floating, in the browser (IE6-7) does not support BFC, by triggering haslayout closed floating. Three, closed floating method--Excellence

There are 7 types of closed float (seventh: after pseudo-Element) method, through the third section of the principle of analysis, we find in fact more: Display:table-cell, Display:inline-block, etc. as long as the BFC property value is triggered, the float can be closed. From all aspects of comparison, after pseudo-element closure floating is undoubtedly a relatively good solution, the following detailed talk about the method.

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

. clearfix {*zoom:1;}

1) Display:block causes the generated elements to appear as block-level elements, occupying the remaining space;

2) height:0 Avoid creating content that destroys the height of the original layout.

3) Visibility:hidden makes the generated content invisible and allows content that may be generated to be covered by the content can be clicked and interacted with;

4) Through the content: "." Generate content as the last element, whether it is a point or anything else is OK, such as oocss inside there is a classic content: "Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", some versions may be content Inside the content is empty, a bit of cold is not recommended to do so, Firefox until 7.0 content: "" will still produce extra space;

5) zoom:1 trigger IE haslayout.

The analysis found that, in addition to Clear:both used to clear the float, the other code is nothing more than to hide the content generated, which is why other versions of the closed float font-size:0,line-height:0.

Excellence Programme One:

Relative to the empty label closed floating method code seems to be somewhat redundant, through the query found that the Unicode character character has a "0 width space", that is, u+200b, the character itself is not visible, so we can completely omit the Visibility:hidden

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

. clearfix {*zoom:1;}.

Excellence Programme II:

By Nicolas Gallagher Big Wet Proposed, original: A new micro Clearfix hack, this method also does not exist in Firefox gap problem.

/* For modern browsers */

. cf:before,.cf:after {

Content: "";

display:table;

}

. cf:after {Clear:both;} /* for IE 6/7 (trigger haslayout) */

. CF {zoom:1;}

It is important to note that:

The above method used: Before pseudo-elements, a lot of people are confused about this, in the end when I need to use before it? Why is the plan not? In fact, it is used to handle margin overlap, because the inner element float creates the BFC, which causes the margin-top of the inner element and the margin-bottom of the previous box to occur superimposed. If this is not what you want, then you can add before, if only a simple closed floating, after is enough! Not as the desert "Clear Float" article: But only when using clearfix:after when the cross-browser compatibility problem There will be a vertical margin overlay bug, this is not a bug, BFC should have the features.

Please see the elegant demo

For further information, see: Clearfix Improvement and Overflow:hidden detailed translation

In the actual development, the improvement scheme one because of the existence of Unicode characters do not fit in the embedded CSS GB2312 encoded page, the use of scenario 7 can completely solve our needs, improve the program two await the further practice of everyone. Scenario 3, 4 closed floating through overflow, has actually created a new block-level formatting context, which will result in a series of changes in its layout and relative to the floating behavior, and clearing the float is only a function of a series of changes. Therefore, in order to close the float to change the global characteristics, it is unwise, the risk is a series of bugs, such as the early version of Firefox to focus, truncated the absolute location of the layer and so on. Always understand that if you just need to close the float, overflow do not use, rather than some of the article said "careful use."

It took me three days to finish writing this article. If you feel that this article is helpful to you, your message is my greatest support, at the same time because of limited energy, welcome to point out the mistakes and shortcomings in the text, mutual encouragement!

Resources:

• Page breaks and block-formatting contexts:allowed page breaks (13.3.3)
• Clearfix and block formatting contexts:everything Know about clearfix are wrong

• Block formating contexts, "haslayout" –ie window vs CSS2.1 browsers:simulations.
• New block formatting contexts next to floats
• Control Block Formatting Context

• On have 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

Transferred from: http://www.iyunlu.com/view/css-xhtml/55.html

Clear float--full interpretation (excerpt from the Net--the float we cleared together over the years)