search

Home >Web Front-end >HTML Tutorial >hasLayout && Block Formatting Contexts_html/css_WEB-ITnose

hasLayout && Block Formatting Contexts_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:42:26937browse

Reprinted from: http://www.smallni.com/haslayout-block-formatting-contexts/

Because my brain is not working well, I printed out a hasLayout and The trigger table of Block Formatting Contexts (hereinafter referred to as BFC) is posted on the desk (it can also be said to have created a BFC). I will remember it after reading it every day. I wonder if you have an in-depth understanding of these two things. If so, If you really understand it, some strange bugs in various browsers will be easily solved. Today, let’s analyze them together and uncover their mysterious veil.

1.hasLayout

'Layout' is a proprietary concept of IE. It determines how an element positions and sizes its content, its relationship and interaction with other elements, and how it interacts with other elements. Applications also have user impacts.

  • Concept Note:
  • ‘Layout’ can be irreversibly triggered by certain CSS properties , and some HTML elements themselves have layout.
  • ‘Layout’ In IE, you can use the hasLayout attribute to determine whether an element has layout, such as object.currentStyle.hasLayout.
  • ‘Layout’ is an internal component of the IE browser rendering engine. In Internet Explorer, an element either organizes and calculates the size of its own content, or relies on a containing block to calculate the size and size of the content. In order to reconcile the contradiction between these two methods, the rendering engine uses the ‘hasLayout’ attribute, which can be true or false. When the 'hasLayout' attribute value of an element is true, we say that the element has a layout, that is, hasLayout is successfully triggered
  • Triggering method:
  • Elements with default layout: 
    <html>, <body><table>, <tr>, <th>, <td><img><hr><input>, <button>, <select>, <textarea>, <fieldset>, <legend><iframe>, <embed>, <object>, <applet><marquee>
  • CSS properties that can trigger hasLayout: 
    display: inline-block         /*ALL*/height: (除 auto 外任何值)    /*仅适用IE6 7*/width: (除 auto 外任何值)     /*仅适用IE6 7*/float: (left 或 right)       /*ALL*/position: absolute           /*ALL*/writing-mode: tb-rl          /*ALL*/zoom: (除 normal 外任意值)    /*仅适用IE6 7*/
  • IE7 also has some additional attributes (not a complete list) that can trigger hasLayout: 
    min-height: (任意值)/*以下适用IE7+*/min-width: (任意值)max-height: (除 none 外任意值)max-width: (除 none 外任意值)overflow: (除 visible 外任意值，仅用于块级元素)overflow-x: (除 visible 外任意值，仅用于块级元素)overflow-y: (除 visible 外任意值，仅用于块级元素)position: fixed
  • Previous versions of IE6 (including the mixed mode of IE6 and all subsequent versions, in fact, this mixed mode is equivalent to IE 5.5 in terms of rendering), by setting the 'width' or 'height' of any element ( hasLayout can be triggered by non-auto); but it does not work on inline elements in the standards mode of IE6 and IE7. Only by setting 'display:inline-block'.

    • 2.Block Formatting Contexts (BFC)

    IE has its own hasLayout attribute, so what about non-IE browsers? Non-IE browsers use BFC (Block Formatting Context)

  • Concept description:
  • BFC is a concept in the W3C CSS 2.1 specification, which determines the element How its content is positioned, and its relationship and interaction with other elements.
  • In the element where BFC is created, its child elements will be placed one after another. Their starting point vertically is the top of a containing block, and the vertical distance between two adjacent elements is determined by the 'margin' property. In BFC, the vertical margins of adjacent block-level elements collapse.
  • In BFC, the outer left edge of every element touches the left side of the containing block (for right-to-left formatting, the outer right edge touches the right side), even if floats are present (despite the content area of ​​an element will be compressed due to floats), unless this element also creates a new BFC.
  • In CSS3, this concept has been changed: http://www.w3.org/TR/css3-box/#block-level0CSS3, BFC is called flow root.
  • Triggering method
    float:(任何值除了none)overflow:（任何值除了visible）display:(table-cell/table-caption/inline-block)position:(任何值除了static/relative)

    • Tips: We sometimes use the overflow:hidden method to clear floats because the block formatting context of the element is triggered (IE6 7 requires zoom to be 1 ), this method is indeed simple, but very violent? -#

    3. Features of hasLayout and BFC

    3.1 Among the elements that trigger hasLayout and the elements that create BFC, the floating element participates in the height Calculation of

    Case 1: The block-level non-replacement element of the BFC is not created, triggering IE's hasLayout.

    Analyze the following code: 

    <div style="width:300px;">    <div id="Container" style="background:silver; zoom:1;">        <span id="SPAN1" style="background:gray;">simple text</span>        <div id="DIV1" style="width:150px; height:50px; background:dimgray;">in flow</div>        <div id="DIV2" style="float:left; background:gold;">float:left</div>    </div></div>
  • Container No block formatting context is created.
  • Container's 'zoom:1' setting is to trigger the height of hasLayout in IE;
  • Container The value is auto, and the value of 'overflow' is the default 'visible';
  • SPAN1 is an inline element, and DIV1 is a block in the normal flow Element;
  • DIV2 is a float block-level element.

    • According to the height calculation rules in Section 10.6.3 of the CSS2.1 specification, when calculating the height of block-level non-replaced elements in ordinary flow, floating child elements do not participate in the calculation.

    So, when calculating the height of Container, it is only affected by SPAN1 and DIV1 and should be the sum of their two heights. , so the final silver part should not contain the gold part.

    This code behaves as follows in different browser environments:

    IE6 IE7 IE8(Q) IE8(S) Firefox Chrome Safari Opera

    去掉 Container 的 ‘zoom:1′ 后，各浏览器表现一致：

    可见，IE 浏览器中，触发 hasLayout 的元素在进行高度计算的时候，其浮动的子元素也会参与运算。

    情况2：创建了 BFC的块级非替换元素，未触发 IE 的 hasLayout。

    分析以下代码：

    <div style="width:300px;">    <div id="Container" style="background:silver; overflow:hidden;">        <span id="SPAN1" style="background:gray;">simple text</span>        <div id="DIV1" style="width:150px; height:50px; background:dimgray;">in flow</div>        <div id="DIV2" style="float:left; background:gold;">float:left</div>    </div></div>
  • Container 的 ‘overflow:hidden;’ 创建了BFC；
  • Container 的 ‘overflow:hidden;’，在 IE6 中未触发 hasLayout，但在 IE7(S) 中触发了 hasLayout；
  • Container 的高度值为 ‘auto’；
  • SPAN1 是一个行内元素，DIV1 是一个处于普通流中的块元素；
  • DIV2 是一个浮动的块级元素。

    • 根据 CSS2.1 规范第10.6.7部分的高度计算规则，在计算生成了 BFC的元素的高度时，其浮动子元素应该参与计算。

    所以，在进行 Container 高度计算时，DIV2 也应该参与计算，所以最终银色部分应该包含金色的部分。

    这段代码在不同的浏览器环境中表现如下：( 注意 IE7(S) 此时触发了 hasLayout )

    IE6 IE7(Q) IE8(Q) IE7(S) IE8(S) Firefox Chrome Safari Opera

    可见，只要 Container 创建了 BFC，其浮动子元素就会参与其高度计算（IE7(S) 是由于 hasLayout 导致与其他浏览器的效果相同）。

    3.2 与浮动元素相邻的、触发了 hasLayout 的元素或创建了 BFC 的元素，都不能与浮动元素相互覆盖

    如果浮动元素的两侧有足够的空间放置该元素，则元素会紧邻浮动元素放置，必要时，该元素的宽度将会被压缩。否则它们可 能会定位到浮动元素的下方。

    情况1：没有创建 BFC 的块级非替换元素，触发了 IE 的 hasLayout。

    分析以下代码：

    <div id="Container" style="border:2px solid gold; width:300px; height:150px;<strong> background:url("grid2a.png") repeat;</strong>">    <div id="DIV1" style=" width:100px; height:100px; float:left; filter:alpha(opacity=50); opacity: 0.5;">        Float Block    </div>    <div id="DIV2" style=" zoom:1;">        If I had a single flower for every time I think about you, I could walk forever in my garden.    </div></div>
  • DIV1 是一个浮动元素，背景是 50% 的透明
  • DIV2 的 ‘zoom:1′ 触发了 IE 中的 hasLayout。

    • 其中，grid2a.png 背景是 100px * 100px 的图片：

    根据 CSS 2.1 9.5 Floats 中的描述，浮动元素会覆盖普通流中的块容器。所以，DIV2 应该有一部分呢被 DIV1 覆盖。

    这段代码在不同的浏览器环境中表现如下：(忽略 IE 中 3px BUG 的影响)

    IE6 IE7 IE8(Q) IE8(S) Firefox Chrome Safari Opera

    情况2：创建了 BFC的块级非替换元素，未触发 IE 的 hasLayout。

    分析以下代码：

    <div id="Container" style="border:2px solid gold; width:300px; height:150px;<strong> background:url("grid2a.png") repeat;</strong>">    <div id="DIV1" style=" width:100px; height:100px; float:left; filter:alpha(opacity=50); opacity: 0.5;">        Float Block    </div>    <div id="DIV2" style=" overflow:hidden;">        If I had a single flower for every time I think about you, I could walk forever in my garden.    </div></div>
  • DIV1 是一个浮动元素，背景是50%的透明
  • DIV2 的 ‘overflow:hidden;’ 在 IE6 中未触发 hasLayout，但在 IE7(S) 中触发了 hasLayout。

    • 根据 CSS 2.1 9.5 Floats 中的描述，创建了BFC的元素不能与浮动元素重叠， 所以，DIV2 应该有一部分被 DIV1 覆盖。

    这段代码在不同的浏览器环境中表现如下：( 注意 IE7(S) 此时触发了 hasLayout )

    IE6 IE7(Q) IE8(Q) IE7(S) IE8(S) Firefox Chrome Safari Opera

     

    3.3 触发 hasLayout 的元素和创建了 BFC的元素不会与它们的子元素发生外边距折叠

    情况1：没有生成BFC的块级非替换元素，触发了 IE 的 hasLayout。

    分析以下代码：

    <div id="Container" style="width:300px; border:1px solid gold;">    <div id="DIV1" style="zoom:1; background:darkgray;">        <div id="DIV2" style="margin:30px 0; width:60px;">content</div>    </div></div>
  • Container 是宽度为300px，含有 border 的块元素，根据标准，它不会与子元素的 margin 发生空白边折叠。
  • DIV1 的宽度没有设置，所以宽度等于 Container 的宽度。
  • DIV1 的高度也没有设置，所以其高度取决于其内容的高度。
  • DIV1 设置了 ‘zoom:1’，在 IE 中触发了 hasLayout。

    • 根据 CSS 2.1 8.3.1 Collapsing margins 第一条，两个相邻的普通流中的块框在垂直位置的空白边会发生折叠现象。

    DIV1 和 DIV2 应该发生空白边折叠，深灰色的 DIV1 应该刚好包含 ‘content’ 文本。

    这段代码在不同的浏览器环境中表现如下：

    IE6 IE7 IE8(Q) IE8(S) Firefox Chrome Safari Opera

    可见，在 IE 中，触发 hasLayout 的元素，阻止了它自身与子元素间的空白边折叠。

    情况2：生成 BFC的块级非替换元素，未触发 IE 的 hasLayout。

    分析以下代码：

    <div id="Container" style="width:300px; border:1px solid gold;">    <div id="DIV1" style="overflow:hidden; background:darkgray;">        <div id="DIV2" style="margin:30px 0; width:60px;">content</div>    </div></div>
  • Container 是宽度为300px，含有 border 的块元素，根据标准，它不会与子元素的 margin 发生空白边折叠。
  • DIV1 的宽度没有设置，所以宽度等于 Container 的宽度。
  • DIV1 的高度也没有设置，所以其高度取决于其内容的高度。
  • DIV1 设置了 ‘overflow:hidden’，在 IE6 中未触发 hasLayout，但在 IE7(S) 中触发了 hasLayout。

    • 根据 CSS 2.1 8.3.1 Collapsing margins 第三条，生成BFC 的元素不会和在流中的子元素发生空白边折叠。

    DIV1 和 DIV2 不应该发生空白边折叠，深灰色的 DIV1 应该撑满 Container 。

    这段代码在不同的浏览器环境中表现如下：( 注意IE7(S) 此时触发了 hasLayout )

    IE6 IE7(Q) IE8(Q) IE7(S) IE8(S) Firefox Chrome Safari Opera

    It can be seen that in IE, if the BFC is created and hasLayout is not triggered, the blank edge collapse between itself and the child elements will still occur.

    Similarities, differences and possible problems between hasLayout and BFC

  • Differences
  • In versions before IE8(S), there is no block formatting context and Inline mentioned in the specification Formatting context concept, but use hasLayout to achieve a similar purpose.
  • In IE, you can set 'width', 'height', 'min-width', 'min-height', 'max-width', 'max-height', 'zoom', 'writing -mode' to trigger hasLayout, and the settings of these attribute values ​​do not enable the element to create BFC.
  • In IE, many elements have layout by default, such as IPUNT, BUTTON, SELECT, TEXTAREA, etc., but these elements will form an Inline formatting context in the standard (will be introduced later in this blog).
  • Common points
  • Both are rules that determine how content is positioned and size calculated.
  • Both determine the rules for interaction with other elements.
  • ‘table-cell’ and ‘table-caption’ are both elements of hasLayout and elements that can create BFC.
  • Floating elements, absolutely positioned elements, inline-block elements, and overflow (IE7) with any value except 'visible' can trigger hasLayout in IE, and in the standard, BFC can be created.
  • Possible compatibility issues:
  • Since hasLayout and BFC are different understandings of the same type of things, and their enabling conditions are different, if an element is designed, it will not work in IE hasLayout is triggered in earlier versions, but no BFC is created in other browsers, or conversely, an element does not trigger hasLayout in earlier versions of IE, but BFC is created in other browsers (such as 'overflow:hidden' is set ), will result in significant differences in page layout.

    • Solution

    The above problem can only be avoided when an element triggers hasLayout in an earlier version of IE and creates a BFC in other browsers. That is, enable both of the above to ensure compatibility across browsers, or conversely, disable both.

    1. Enable the element to generate BFC and trigger hasLayout
    2. For the element that triggers hasLayout, set it through CSS to make it generate BFC;
    3. Generate BFC but If there is no element that triggers hasLayout, set 'zoom:1' to make it trigger hasLayout.
    4. The element does not trigger hasLayout and does not create a BFC.

    Part of the content of this article comes entirely from W3Help (武利剑). Some other sources of information referenced in this article:

    http://www.w3.org/TR/CSS21/visuren .html#block-formatting

    http://reference.sitepoint.com/css/haslayout

    http://blog.csdn.net/pengju_guo/article/details/6945436

    http://www.qianduan.net/comprehensive-haslayout.html

    Statement：
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article：A little basic knowledge of html form to implement file upload_html/css_WEB-ITnoseNext article：A little basic knowledge of html form to implement file upload_html/css_WEB-ITnose

    Related articles

    See more