Community
Learn
Tools Library
AI Tools
Leisure
search
English
Table of Contents
1.hasLayout
2.Block Formatting Contexts (BFC)
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
3.2 与浮动元素相邻的、触发了 hasLayout 的元素或创建了 BFC 的元素，都不能与浮动元素相互覆盖
3.3 触发 hasLayout 的元素和创建了 BFC的元素不会与它们的子元素发生外边距折叠
Similarities, differences and possible problems between hasLayout and BFC
Solution
Home Web Front-end HTML Tutorial hasLayout && Block Formatting Contexts_html/css_WEB-ITnose

hasLayout && Block Formatting Contexts_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Jun 24, 2016 am 11:42 AM

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:

    1

    <html>, <body><table>, <tr>, <th>, <td><img><hr><input>, <button>, <select>, <textarea>, <fieldset>, <legend><iframe>, <embed>, <object>, <applet><marquee>

    Copy after login
  • CSS properties that can trigger hasLayout:

    1

    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*/

    Copy after login
  • IE7 also has some additional attributes (not a complete list) that can trigger hasLayout:

    1

    min-height: (任意值)/*以下适用IE7+*/min-width: (任意值)max-height: (除 none 外任意值)max-width: (除 none 外任意值)overflow: (除 visible 外任意值，仅用于块级元素)overflow-x: (除 visible 外任意值，仅用于块级元素)overflow-y: (除 visible 外任意值，仅用于块级元素)position: fixed

    Copy after login
  • 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

    1

    float:(任何值除了none)overflow:（任何值除了visible）display:(table-cell/table-caption/inline-block)position:(任何值除了static/relative)

    Copy after login

    • 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:

    1

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

    Copy after login
  • 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。

    分析以下代码：

    1

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

    Copy after login
  • 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。

    分析以下代码：

    1

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

    Copy after login
  • 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。

    分析以下代码：

    1

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

    Copy after login
  • 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。

    分析以下代码：

    1

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

    Copy after login
  • 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。

    分析以下代码：

    1

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

    Copy after login
  • 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 of this Website
    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

    Hot AI Tools

    Undresser.AI Undress

    Undresser.AI Undress

    AI-powered app for creating realistic nude photos

    AI Clothes Remover

    AI Clothes Remover

    Online AI tool for removing clothes from photos.

    Undress AI Tool

    Undress AI Tool

    Undress images for free

    Clothoff.io

    Clothoff.io

    AI clothes remover

    AI Hentai Generator

    AI Hentai Generator

    Generate AI Hentai for free.

    Show More

    Hot Article

    R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
    4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Best Graphic Settings
    4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
    Assassin's Creed Shadows: Seashell Riddle Solution
    2 weeks ago By DDD
    R.E.P.O. How to Fix Audio if You Can't Hear Anyone
    4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Chat Commands and How to Use Them
    4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
    Show More

    Hot Tools

    Notepad++7.3.1

    Notepad++7.3.1

    Easy-to-use and free code editor

    SublimeText3 Chinese version

    SublimeText3 Chinese version

    Chinese version, very easy to use

    Zend Studio 13.0.1

    Zend Studio 13.0.1

    Powerful PHP integrated development environment

    Dreamweaver CS6

    Dreamweaver CS6

    Visual web development tools

    SublimeText3 Mac version

    SublimeText3 Mac version

    God-level code editing software (SublimeText3)

    Show More

    Hot Topics

    Where is the login entrance for gmail email?
    7518
    15
    CakePHP Tutorial
    1378
    52
    What is the format of the account name of steam
    81
    11
    win11 activation key permanent
    53
    19
    nyt connections hints and answers
    21
    68
    Show More
    Related knowledge
    What is the purpose of the <progress> element? What is the purpose of the <progress> element? Mar 21, 2025 pm 12:34 PM

    The article discusses the HTML &lt;progress&gt; element, its purpose, styling, and differences from the &lt;meter&gt; element. The main focus is on using &lt;progress&gt; for task completion and &lt;meter&gt; for stati

    What is the purpose of the <datalist> element? What is the purpose of the <datalist> element? Mar 21, 2025 pm 12:33 PM

    The article discusses the HTML &lt;datalist&gt; element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

    What are the best practices for cross-browser compatibility in HTML5? What are the best practices for cross-browser compatibility in HTML5? Mar 17, 2025 pm 12:20 PM

    Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

    How do I use HTML5 form validation attributes to validate user input? How do I use HTML5 form validation attributes to validate user input? Mar 17, 2025 pm 12:27 PM

    The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

    What is the purpose of the <meter> element? What is the purpose of the <meter> element? Mar 21, 2025 pm 12:35 PM

    The article discusses the HTML &lt;meter&gt; element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates &lt;meter&gt; from &lt;progress&gt; and ex

    What is the viewport meta tag? Why is it important for responsive design? What is the viewport meta tag? Why is it important for responsive design? Mar 20, 2025 pm 05:56 PM

    The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.

    What is the purpose of the <iframe> tag? What are the security considerations when using it? What is the purpose of the <iframe> tag? What are the security considerations when using it? Mar 20, 2025 pm 06:05 PM

    The article discusses the &lt;iframe&gt; tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.

    Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Apr 04, 2025 pm 11:54 PM

    GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...

    See all articles