About the haslayout of block formatting CONTEXT--BFC and IE

What is BFC?

The BFC(block formatting context) literal translates to "chunk-level formatting range".

is a concept in the CSS 2.1 specification that determines how elements are positioned on their content, as well as their relationships and interactions with other elements. When it comes to visual layouts, Block formatting context provides an environment in which HTML elements are laid out according to certain rules. The elements in one environment do not affect the layout in other environments. For example, floating elements can form BFC, and the elements inside the floating element are mainly affected by the floating element, and the two floating elements are not affected by each other. Here is a bit like a BFC is an independent administrative unit meaning. It can also be said that BFC is a scope of action. It can be understood as a separate container, and the layout of the box in the container is irrelevant to the outside of the container.

Another popular explanation is that the box in the normal flow is a formatting context (format), which can be either block or inline, but not both. Also, the block boxes (block box) is formatted in block formatting context (block formatting contexts), and the inline boxes (block inner box) is formatted in the inline formatting context (in-line formatting context) Of. Any rendered element belongs to a box, and not block, or inline. Even text that is not wrapped by any element, depending on the situation, will also belong to the anonymous block boxes or inline boxes. So the above description is to divide all the elements into the corresponding formatting context.

Its general performance rules, I have organized the following situations:

1. In the element that created the Block formatting Context, its child elements are placed one after the other by the document flow. Their starting point in the vertical direction is the top of a containing block, and the vertical distance between the two adjacent elements depends on the ' margin ' attribute.

According to the CSS 2.1 8.3.1 collapsing margins the first bar, two adjacent normal streams in the block box in the vertical position of the blank edge will collapse phenomenon. That is, the margin of two vertical windows in the same BFC overlaps.

Based on the CSS 2.1 8.3.1 collapsing margins third, the element that generated the block formatting context does not collapse with a blank edge in the child element in the stream. So the solution to this problem is to add a package container with BFC for two containers.

2. In block formatting Context, the left side of each element is in contact with the left of the containing block (for right-to-left formatting, right outer contact to the right), even if there is a float (although the content area of an element is compressed by floating), Unless this element also creates a new Block formatting Context.

3, Block formatting context is a separate, isolated container on the page, the child elements inside the container will not affect the outside elements in the layout , and vice versa.

4. According to the description in CSS 2.1 9.5 floats, the element that created Block formatting Context cannot overlap with floating elements.

The elements of the table Border-box, block-level substitution elements, or the creation of a new block formatting context in a normal stream (such as when the element's ' overflow ' attribute is not ' visible ') cannot be in the same block The floating elements in the formatting context overlap.

5. When the container has enough remaining space to hold the width of the BFC, all browsers place BFC in the remaining space of the row where the floating element is located.

6. In IE6 IE7 IE8 Chrome Opera, when the width of the BFC is between "container remaining width" and "container width", BFC is displayed on the next line of floating elements, and in Safari, BFC remains displayed in the row of floating elements, and BFC overflow In Firefox, when the container itself creates a BFC or a container of ' padding-top ', ' border-top-width ' that behaves like IE8 (S) or Chrome, which is similar to Safari.

It is verified that only Firefox will be displayed on the same line in the latest version of the browser, and other browsers will be wrapped.

7. In IE6 IE7 IE8 Opera, when the width of the BFC is greater than the container width, BFC is displayed on the next line of floating elements, and in Chrome Safari, BFC remains in the row where the floating element is located, and BFC overflows the container; in Firefox , when the container itself has created BFC or the container's ' padding-top ', ' border-top-width ' features that are not all 0 in the same performance as IE8 (S), otherwise the performance is similar to Chrome.

It is verified that only Firefox will be displayed on the same line in the latest version of the browser, and other browsers will be wrapped.

8. According to the height calculation rules of section 10.6.7 of the CSS2.1 specification, when calculating the height of the element that generated the block formatting context, its floating child elements should participate in the calculation.

If there are other circumstances, please reply to add, I will update in time!

Let's look at a more typical example:

<! DOCTYPE html>
The effect is as follows:
The code intended to form a layout of two rows and two columns, but because of the #red, #yellow, #orange, #green四个div在同一个布局环境BFC中, so although they are in two different div (#c1和 #c2), they still do not wrap, but are arranged in a row of four rows.
To make a layout of two rows and two columns, create two different layout environments, or you can create two BFC. So how do you create BFC?
second, how to produce BFC: A block formatting Context can be generated when an HTML element satisfies any of the following conditions:
 
 

  
  
 
   
The value of float is not none.
 
   
The value of the overflow is not visible.
 
   
The value of display is Table-cell, table-caption, any of the inline-block.
 
   
The value of position is not relative and static.
 
  
 
 
If there are other ways, please give in reply, I will update in time!!
In the example above, I add two lines of code to create two BFC:
#c1 {Overflow:hidden;} #c2 {Overflow:hidden;}
The effect is as follows:
The above created two layout environment BFC. The left float of the inner child element does not affect the outer element. So #c1 and #c2 not affected by the floating, still occupy one line!
Iii. What can BFC be used to do?
A, does not overlap with floating elements
If a floating element is followed by a non-floating element, then an overlay is created, and many adaptive two-column layouts do so.
Take a look at the following example
<! DOCTYPE html>
As follows:
Obviously, the. aside and. Mian overlap. Try to analyze, because two boxes are in the same BFC, are based on the BFC boundary as the starting point, if the two box itself has BFC, it will be arranged in a sequential layout, Now. Main does not have BFC, according to Rule 2, the inner element will start from the left side, unless it has BFC itself, according to the above rule 4 has BFC elements can not be overlapped with floating elements, so long as the. Mian and then create a BFC, you can solve this overlapping problem. Above has said that the method of creating BFC, can choose different methods according to the specific situation, here I choose to add Overflow:hidden.
Due to the reasons for IE need to add a solution to the Haslayout zoom:1, the haslayout will be discussed later.
B. Clear the inner float of the element
As long as the parent element is set to BFC to clear the floating of the child elements, the most common use is to set the Overflow:hidden style on the parent element, for IE6 plus zoom:1 (IE haslayout).
Look at the following example:
<! DOCTYPE html>
As follows:
Based on the height calculation rules of section 10.6.3 of the CSS2.1 specification, floating child elements do not participate in the calculation of the height of the block-level non-replacement element in the normal flow.
At the same time CSS2.1 the height calculation rule of section 10.6.7, when calculating the height of the element that generated the block formatting context, its floating child elements should participate in the calculation.
Therefore, the external container BFC is triggered and the height is recalculated. For example, add attribute Overflow:hidden to outer to trigger its BFC.
c, solve the top and bottom two elements overlap
Look at the following example:
<! DOCTYPE html>
The effect is as follows:
According to the CSS 2.1 8.3.1 collapsing margins the first bar, two adjacent normal streams in the block box in the vertical position of the blank edge will collapse phenomenon. That is, the margin of two vertical windows in the same BFC overlaps.
Based on the CSS 2.1 8.3.1 collapsing margins third, the element that generated the block formatting context does not collapse with a blank edge in the child element in the stream. So the solution to this problem is to add a package container with BFC for two containers.
So the solution to this problem is that the two containers are placed in two BFC of the package container, IE is triggered layout of the two package container!
<! DOCTYPE html>
The effect is as follows:
Iv. What is IE's haslayout
In the example above, we used IE's zoom:1, which actually triggered the layout of IE. Layout is an internal component of the IE browser rendering engine. In IE, an element either organizes and calculates the size of its own content, or relies on containing blocks to calculate dimensions and organize content. To reconcile these two approaches, the rendering engine takes the ' haslayout ' attribute, which can be either true or false. When the value of an element's ' Haslayout ' property is true, we say that the element has a layout, or has a layout. You can use the Haslayout property to determine whether an element has layout,
such as Object.currentStyle.hasLayout.
There are many similarities between Haslayout and BFC, but the concept of haslayout is much easier to understand. In Internet Explorer, elements use the "layout" concept to control dimensions and positioning, divided into own layouts and no layouts, and elements with layouts that control the size and positioning of themselves and their child elements. Elements that do not have a layout are controlled by the parent element (the most recent ancestor that owns the layout), and if an element has a layout, the Haslayout property tells the browser that it is a Boolean variable, that true means that the element has a layout, and false indicates that the element has no layout. In short, Haslayout is only a proprietary property under IE, and the element browser Haslayout True will give it a series of effects.
In particular, haslayout in IE 8 and after the IE version has been discarded, so in real development only for the browser under IE 8 for some elements to trigger haslayout.
V. How to trigger Layout
An element trigger haslayout will affect the size and positioning of an element, which consumes more system resources, so IE designers will default to only a subset of the elements trigger haslayout (that is, the default part of the element will trigger Haslayout, which is basically entirely by the developer BFC with a specific C The SS trigger is not the same), this element is as follows:
In addition to the HASLAYOUT elements that are triggered by IE by default, WEB developers can also use specific CSS to trigger the haslayout of elements.
By setting any of the following CSS for an element, you can trigger haslayout (that is, set the element's Haslayout property to True).
Display:inline-blockheight: (any value except Auto) Width: (any value except Auto) float: (left or right) Position:absolutewriting-mode:tb-rlzo Om: (any value except normal) Min-height: (Any value) Min-width: (Any value) Max-height: (any value except none) Max-width: (any value except none) Overflow: (except for the visible Outside any value, only for block-level elements) Overflow-x: (any value except visible, only for block-level elements) Overflow-y: (any value except visible, only for block-level elements) position:fixed
For inline elements (which can be either a SPAN element that is considered inline by the browser by default, or an element that has a display:inline set), Width and height can trigger elements only under ie5.x and IE6 or later quirks mode Hasla Yout, but for IE6, if the browser is running in standard compatibility mode, the inline element ignores the width or Height property, so setting width or height cannot order the element to trigger the haslayout in this case. But zoom in addition to IE 5.0 in the Chinese and foreign, always can trigger haslayout. Zoom is used to set or retrieve the scale of an element, and setting zoom:1 for an element can trigger an element's haslayout without unnecessarily affecting the element. Therefore, it is recommended to use ZOOM:1 to trigger the haslayout of an element, taking into account the compatibility between browsers and the effects on elements.
Vi. issues that can be solved
Haslayout features are similar to BFC, so they can be considered as BFC in IE. The above rules are almost always followed, so the above problems can be solved by triggering haslayout in IE.
Although Haslayout will also affect the size and positioning of elements like BFC, but it is not a complete set of standards, and because it is only triggered by default for certain elements, which led to a lot of the front-end development of IE bugs, triggering haslayout greater significance is to solve some IE bug s, rather than using some of its "side effects" to achieve some effect. In addition, because the elements triggering the haslayout will appear similar to the elements triggering BFC, so in order to unify the elements in IE and support BFC browser performance, Kayo proposed to trigger the BFC element at the same time trigger haslayout, of course, also need to consider the actual situation, there are It is possible to achieve uniformity by triggering only one of them, as illustrated below.
Here we first list some of the effects that trigger the Haslayout element:
A, prevent margin folding
As the above example:
<! DOCTYPE html>
Need to trigger. MG layout to solve the margin overlap problem
The results are as follows:
Above the example of BFC, in the Ie6\7 trigger layout can be resolved, you can try it yourself, here is not repeated examples.
Transferred from: Mu Yi
About the haslayout of block formatting CONTEXT--BFC and IE