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

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

    分析以下代码：

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

    分析以下代码：

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

    分析以下代码：

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

    分析以下代码：

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

    分析以下代码：

    <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

    Video Face Swap

    Video Face Swap

    Swap faces in any video effortlessly with our completely free AI face swap tool!

    Show More

    Hot Article

    What's New in Windows 11 KB5054979 & How to Fix Update Issues
    3 weeks ago By DDD
    How to fix KB5055523 fails to install in Windows 11?
    2 weeks ago By DDD
    InZoi: How To Apply To School And University
    4 weeks ago By DDD
    How to fix KB5055518 fails to install in Windows 10?
    2 weeks ago By DDD
    Roblox: Dead Rails – How To Summon And Defeat Nikola Tesla
    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?
    7833
    15
    Java Tutorial
    1648
    14
    CakePHP Tutorial
    1403
    52
    Laravel Tutorial
    1300
    25
    PHP Tutorial
    1240
    29
    Show More
    Related knowledge
    Is HTML easy to learn for beginners? Is HTML easy to learn for beginners? Apr 07, 2025 am 12:11 AM

    HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

    The Roles of HTML, CSS, and JavaScript: Core Responsibilities The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

    HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

    Understanding HTML, CSS, and JavaScript: A Beginner's Guide Understanding HTML, CSS, and JavaScript: A Beginner's Guide Apr 12, 2025 am 12:02 AM

    WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

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

    What is an example of a starting tag in HTML? What is an example of a starting tag in HTML? Apr 06, 2025 am 12:04 AM

    AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

    How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? Apr 05, 2025 am 06:15 AM

    To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...

    How to implement adaptive layout of Y-axis position in web annotation? How to implement adaptive layout of Y-axis position in web annotation? Apr 04, 2025 pm 11:30 PM

    The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...

    HTML, CSS, and JavaScript: Essential Tools for Web Developers HTML, CSS, and JavaScript: Essential Tools for Web Developers Apr 09, 2025 am 12:12 AM

    HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.

    See all articles