Comprehensive interpretation of clearing floats (excerpted from online excerpts of floats we cleared together over the years)_html/css_WEB-ITnose

1. Clear float and closed float

The so-called clear float means that the display is correct. It avoids the feature of document flow automatically wrapping floating elements (it is common to set the clear:both; attribute in the footer part);

and closing the float does indeed solve the problem of height collapse, making the wrap element have a height. Suspicious wrapping into floated elements. Therefore, it is more appropriate to call it closed floating.

2. The principle of closed float

There are many commonly used methods to clear floats, which can be divided into two categories

1. Add an empty element at the end of the floating element and set clear :both attribute
2. parent element sets overflow or display:table;

So what is the principle? Before doing this, you need to understand hasLayout and Block formatting contexts .

The so-called Block formatting contexts refer to block-level formatting contexts, referred to as BFC.

So how to trigger BFC?

float Values ​​other than none

overflow Values ​​other than visible (hidden, auto, scroll)

display (table- cell, table-caption, inline-block)

position (absolute, fixed)

fieldset element

It should be noted that display: table It does not create a BFC by itself, but it will generate anonymous boxes, and display:table-cell in the anonymous box can create a new BFC. In other words, it is the anonymous box that triggers the block-level formatting context, and Not display:table. Therefore, the BFC effects created by display:table and display:table-cell are different.

The fieldset element currently does not have any information about this triggering behavior in www.w3.org, and it will not appear until the HTML5 standard. Some browser bugs (Webkit, Mozilla) mention this triggering behavior, but there is no official statement. In fact, even though fieldsets can create new block-level formatting contexts in most browsers, developers should not take this for granted. CSS 2.1 does not define which properties apply to form controls, nor how to style them using CSS. User agents may apply CSS properties to these properties. Developers are advised to consider this support as experimental and may be further standardized in later versions of CSS.

BFC features:

1) Block-level formatting context will prevent margin overlay

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

2) Block-level formatting context will not overlap floating elements

According to regulations, the border of a block-level formatting context cannot overlap the margins of the elements inside it. This means that the browser will create implicit margins for the block-level formatting context to prevent it from overlapping the floating element's margins. For this reason, adding negative margins to a block-level formatting context next to a float will not work (Webkit and IE6 have a problem with this - see this test case).

3) Block-level formatting context can usually contain floats

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

In layman’s terms: the element that creates a BFC is an independent box. The sub-elements inside will not affect the layout of the outside elements, and vice versa. At the same time, the BFC still belongs to the normal flow in the document.

At this point, you may understand why overflow:hidden or auto can be closed and floated. It is because the parent element creates a new BFC. Regarding Zhang Xinxu's article "Some Understanding of Overflow and Zoom "Clear Float"", I think it is not rigorous enough and has no basis for using packages to explain the principle of closed float. And it is said that "Browsers such as Firefox do not have the concept of haslayout", then modern browsers have BFC. In terms of performance, hasLayout can be equivalent to BFC.

The display engine of IE6-7 uses an internal concept called layout. Since this display engine itself has many defects, it directly leads to many display bugs of IE6-7. When we say that an element "gets layout", or that an element "owns layout", we mean its Microsoft-proprietary property 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. Those elements that have layout are responsible for the size and positioning of themselves and their child elements. If an element's hasLayout is false, its size and position are controlled by its nearest ancestor that has a layout.

Conditions for triggering hasLayout:

position: absolute

float: left|right

display: inline-block

width: except "auto" Any value

height: any value except "auto" (for example, many people use height: 1% to clear floats)

zoom: except "normal" ” Any value outside (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 has also become a layout trigger:

overflow: hidden|scroll|auto (this The attribute does not have the function of triggering 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 browsers. They also did not have the function of triggering layout in previous IE versions)

IE8 uses a brand new display engine, which is said to not use the hasLayout attribute, thus solving many hated bugs.

To sum up:

Close the float by creating a new BFC in browsers that support BFC (IE8, firefox, chrome, safari);

In browsers that do not support BFC The browser (IE6-7) closes the float by triggering hasLayout.

3. Closed floating method?? Keep improving

Seven methods of closed floating (the seventh one is: after pseudo-element) have been listed above. Through the principles analyzed in the third section, we I found that in fact, more attributes: display: table-cell, display: inline-block, etc. can be closed and floated as long as the BFC is triggered. Comparing from all aspects, the closed floating after pseudo-element is undoubtedly a relatively better solution. Let’s talk about this method in detail below.

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

.clearfix { *zoom:1; }

1) display:block causes the generated elements to be displayed as block-level elements, occupying the remaining space;

2) height:0 to prevent the height of the generated content from destroying the original layout.

3) visibility:hidden makes the generated content invisible and allows content that may be covered by the generated content to be clickable and interactive;

4) Generate content via content: "." As the last element, whether the content is dotted or anything else is OK. For example, there is a classic content in oocss: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX". In some versions, the content in the content may be empty. A trace of coldness is not recommended. Firefox until 7.0 content:"" will still produce extra gaps;

5) zoom: 1 triggers IE hasLayout.

Through analysis, we found that except for clear: both used to clear floats, the other codes are just to hide the content generated by content. This is why other versions of closed floats have font-size: 0. line-height: 0.

Optimization plan one:

Compared to the empty label closed floating method code seems to be a bit redundant. Through query, it was found that there are A "zero-width space", that is, U 200B. This character itself is invisible, so we can completely omit visibility: hidden

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

.clearfix { *zoom:1; }.

Excellence Plan 2:

By Nicolas Gallagher Dashi proposed, original text: A new micro clearfix hack, this method does not solve the gap problem 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; }

It should be noted that:

The above method uses the :before pseudo-element. Many people are a little confused about this. When do I need to use before? Why is there no option one? In fact, it is used to handle margin overlap. Since the internal element float creates a BFC, the margin-top of the internal element and the margin-bottom of the previous box overlap. If this is not what you want, then you can add before. If it is just a simple closed float, after is enough! It's not like what Da Mo said in his article "Clear Float": But when you only use clearfix:after, there will be a vertical margin overlay bug in cross-browser compatibility. This is not a bug, but a feature that BFC should have.

Please see the elegant Demo

For more information, please see: "Clearfix Improvement and Overflow:hidden Detailed Explanation [Translation]"

In actual development, improvement plan 1 has Unicode characters that are not suitable for GB2312-encoded pages with embedded CSS. Using plan 7 can completely solve our needs. Improvement plan 2 awaits your further practice. Schemes 3 and 4 close the float through overflow, which actually creates a new block-level formatting context, which will lead to a series of changes in its layout and behavior relative to the float. Clearing the float is just one of a series of changes. Just a function. Therefore, it is unwise to change the global characteristics in order to close the float. The risk is a series of bugs, such as focus in early versions of Firefox, truncation of absolutely positioned layers, etc. Always understand that if you just need to close the float, overflow should not be used, rather than "use with caution" as some articles say.

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

Reference:

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 formatting 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

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