hasLayout && Block Formatting Contexts_html/css_WEB-ITnose

转自：http://www.smallni.com/haslayout-block-formatting-contexts/

因为本人脑子不好使，自己打印出了一张hasLayout和Block Formatting Contexts（以下简称BFC）的触发表贴在办公桌上（也可以称作创建了BFC），每天看看就记住了，不知道大家有没有对这2个东西做过深入了解，如果真的做过了解，一些各浏览器部分奇怪的BUG也会迎刃而解。今天，我们一起来剖析下，揭开它们神秘的面纱。

1.hasLayout

‘Layout’ 是 IE 的专有概念，它决定了元素如何对其内容进行定位和尺寸计算，与其他元素的关系和相互作用，以及对应用还有使用者的影响。

概念说明：

‘Layout’ 可以被某些 CSS property（特性）不可逆的触发，而某些 HTML 元素本身就具有 layout 。

‘Layout’ 在 IE 中可以通过 hasLayout 属性来判断一个元素是否拥有 layout ，如 object.currentStyle.hasLayout 。

‘Layout’ 是 IE 浏览器渲染引擎的一个内部组成部分。在 IE 浏览器中，一个元素要么自己对自身的内容进行组织和计算大小， 要么依赖于包含块来计算尺寸和组织内容。为了协调这两种方式的矛盾，渲染引擎采用了 ‘hasLayout’ 属性，属性值可以为 true 或 false。 当一个元素的 ‘hasLayout’ 属性值为 true 时，我们说这个元素拥有了一个布局（layout），即成功触发hasLayout

触发方式：

默认拥有布局的元素：

, 

, ,

,

, , , , <fieldset>, <legend><iframe>, <embed>, <object>, <applet><marquee><li>可触发 hasLayout 的 CSS 特性： <pre class="precsshui">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*/</pre> </li> <li>IE7 还有一些额外的属性(不完全列表)可以触发 hasLayout ： <pre class="precsshui">min-height: (任意值)/*以下适用IE7+*/min-width: (任意值)max-height: (除 none 外任意值)max-width: (除 none 外任意值)overflow: (除 visible 外任意值，仅用于块级元素)overflow-x: (除 visible 外任意值，仅用于块级元素)overflow-y: (除 visible 外任意值，仅用于块级元素)position: fixed</pre> </li> <li>IE6 以前的版本（也包括 IE6 及以后所有版本的混杂模式，其实这种混杂模式在渲染方面就相当于 IE 5.5）， 通过设置任何元素的 ‘width’ 或 ‘height’（非auto）都可以触发 hasLayout ； 但在 IE6 和 IE7 的标准模式中的行内元素上却不行，设置 ‘display:inline-block’ 才可以。</li> <h2>2.Block Formatting Contexts（BFC）</h2> <p>IE有它自己的hasLayout属性，那么非IE浏览器呢？非IE浏览器采用的就是BFC（块格式化上下文）</p> <li>概念说明： </li> <li> <strong>BFC</strong>是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。</li> <li>在创建了 BFC的元素中，其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性。在BFC中相邻的块级元素的垂直边距会折叠（collapse）。</li> <li>在BFC 中，每一个元素左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边）， 即使存在浮动也是如此（尽管一个元素的内容区域会由于浮动而压缩），除非这个元素也创建了一个新的BFC。</li> <li>在CSS3中，对这个概念做了改动：http://www.w3.org/TR/css3-box/#block-level0CSS3中，将BFC 叫做 flow root。</li> <li>触发方式 <pre class="precsshui">float:(任何值除了none)overflow:（任何值除了visible）display:(table-cell/table-caption/inline-block)position:(任何值除了static/relative)</pre> </li> <p>Tips:我们有时会用overflow:hidden的方法去清除浮动，就是因为触发了元素的块格式化上下文(IE6 7要申明zoom为1)，这个方法的确简单，但很暴力 ? -#</p> <h2>3. hasLayout 和 BFC 的特点</h2> <h3>3.1 在触发 hasLayout 的元素和创建了 BFC的元素中，浮动元素参与高度的计算</h3> <p><strong>情况1：没有创建 BFC的块级非替换元素，触发了 IE 的 hasLayout。</strong></p> <p>分析以下代码：</p> <pre class="precsshui"><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></pre> <li> <strong>Container </strong>没有创建 block formatting context。</li> <li> <strong>Container</strong> 的 ‘zoom:1’设置，是为了触发 IE 中的 <strong>hasLayout</strong>；</li> <li> <strong>Container</strong> 的高度值为 auto，并且 ‘overflow’ 的值为默认的 ‘visible’；</li> <li> <strong>SPAN1</strong> 是一个行内元素， <strong>DIV1</strong> 是一个处于普通流中的块元素；</li> <li> <strong>DIV2</strong> 是一个<strong>浮动</strong>的块级元素。</li> <p>根据 CSS2.1 规范第 10.6.3 部分的高度计算规则，在进行普通流中的块级非替换元素的高度计算时，浮动子元素不参与计算。</p> <p>所以，在进行 <strong>Container</strong> 高度计算时，只受 <strong>SPAN1</strong> 和 <strong>DIV1</strong> 的影响，应该是它们两个的高度之和，所以最终银色部分不应该包含金色的部分。</p> <p>这段代码在不同的浏览器环境中表现如下：</p> <table> <tr> IE6 IE7 IE8(Q) IE8(S) Firefox Chrome Safari Opera </tr> <tr> <td></td> <td></td> </tr> </table> <p>去掉 <strong>Container</strong> 的 ‘zoom:1′ 后，各浏览器表现一致：</p> <p></p> <p>可见，IE 浏览器中，触发 hasLayout 的元素在进行高度计算的时候，其浮动的子元素也会参与运算。</p> <p><strong>情况2：创建了 BFC的块级非替换元素，未触发 IE 的 hasLayout。</strong></p> <p>分析以下代码：</p> <pre class="precsshui"><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></pre> <li> <strong>Container</strong> 的 ‘overflow:hidden;’ 创建了BFC；</li> <li> <strong>Container</strong> 的 ‘overflow:hidden;’，在 IE6 中未触发 hasLayout，但在 IE7(S) 中触发了 hasLayout；</li> <li> <strong>Container</strong> 的高度值为 ‘auto’；</li> <li> <strong>SPAN1</strong> 是一个行内元素，<strong>DIV1</strong> 是一个处于普通流中的块元素；</li> <li> <strong>DIV2</strong> 是一个浮动的块级元素。</li> <p>根据 CSS2.1 规范第10.6.7部分的高度计算规则，在计算生成了 BFC的元素的高度时，其浮动子元素应该参与计算。</p> <p>所以，在进行 <strong>Container</strong> 高度计算时，<strong>DIV2</strong> 也应该参与计算，所以最终银色部分应该包含金色的部分。</p> <p>这段代码在不同的浏览器环境中表现如下：( 注意 IE7(S) 此时触发了 hasLayout )</p> <table> <tr> IE6 IE7(Q) IE8(Q) IE7(S) IE8(S) Firefox Chrome Safari Opera </tr> <tr> <td></td> <td></td> </tr> </table> <p>可见，只要 <strong>Container</strong> 创建了 BFC，其浮动子元素就会参与其高度计算（IE7(S) 是由于 hasLayout 导致与其他浏览器的效果相同）。</p> <h3>3.2 与浮动元素相邻的、触发了 hasLayout 的元素或创建了 BFC 的元素，都不能与浮动元素相互覆盖</h3> <p><strong>如果浮动元素的两侧有足够的空间放置该元素，则元素会紧邻浮动元素放置，必要时，该元素的宽度将会被压缩。否则它们可 能会定位到浮动元素的下方。</strong></p> <p><strong>情况1：没有创建 BFC 的块级非替换元素，触发了 IE 的 hasLayout。</strong></p> <p>分析以下代码：</p> <pre class="precsshui"><div id="Container" style="border:2px solid gold; width:300px; height:150px;<strong> background:url(" grid2a.png repeat>"> <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></pre> <li> <strong>DIV1 </strong>是一个浮动元素，背景是 50% 的透明</li> <li> <strong>DIV2</strong> 的 ‘zoom:1′ 触发了 IE 中的 hasLayout。</li> <p>其中，<strong>grid2a.png</strong> 背景是 100px * 100px 的图片：</p> <p></p> <p>根据 CSS 2.1 9.5 Floats 中的描述，浮动元素会覆盖普通流中的块容器。所以，DIV2 应该有一部分呢被 DIV1 覆盖。</p> <p>这段代码在不同的浏览器环境中表现如下：(忽略 IE 中 3px BUG 的影响)</p> <table> <tr> IE6 IE7 IE8(Q) IE8(S) Firefox Chrome Safari Opera </tr> <tr> <td></td> <td></td> </tr> </table> <p><strong>情况2：创建了 BFC的块级非替换元素，未触发 IE 的 hasLayout。</strong></p> <p>分析以下代码：</p> <pre class="precsshui"><div id="Container" style="border:2px solid gold; width:300px; height:150px;<strong> background:url(" grid2a.png repeat>"> <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></pre> <li> <strong>DIV1</strong> 是一个浮动元素，背景是50%的透明</li> <li> <strong>DIV2</strong> 的 ‘overflow:hidden;’ 在 IE6 中未触发 hasLayout，但在 IE7(S) 中触发了 hasLayout。</li> <p>根据 CSS 2.1 9.5 Floats 中的描述，创建了BFC的元素不能与浮动元素重叠， 所以，<strong>DIV2</strong> 应该有一部分被 <strong>DIV1</strong> 覆盖。</p> <p>这段代码在不同的浏览器环境中表现如下：( 注意 IE7(S) 此时触发了 hasLayout )</p> <table> <tr> IE6 IE7(Q) IE8(Q) IE7(S) IE8(S) Firefox Chrome Safari Opera </tr> <tr> <td></td> <td></td> </tr> </table> <p> </p> <h3>3.3 触发 hasLayout 的元素和创建了 BFC的元素不会与它们的子元素发生外边距折叠</h3> <p><strong>情况1：没有生成BFC的块级非替换元素，触发了 IE 的 hasLayout。</strong></p> <p>分析以下代码：</p> <pre class="precsshui"><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></pre> <li> <strong>Container</strong> 是宽度为300px，含有 border 的块元素，根据标准，它不会与子元素的 margin 发生空白边折叠。</li> <li> <strong>DIV1</strong> 的宽度没有设置，所以宽度等于 <strong>Container</strong> 的宽度。</li> <li> <strong>DIV1</strong> 的高度也没有设置，所以其高度取决于其内容的高度。</li> <li> <strong>DIV1</strong> 设置了 ‘zoom:1’，在 IE 中触发了 hasLayout。</li> <p>根据 CSS 2.1 8.3.1 Collapsing margins 第一条，两个相邻的普通流中的块框在垂直位置的空白边会发生折叠现象。</p> <p><strong>DIV1</strong> 和 <strong>DIV2</strong> 应该发生空白边折叠，深灰色的 <strong>DIV1</strong> 应该刚好包含 ‘content’ 文本。</p> <p>这段代码在不同的浏览器环境中表现如下：</p> <table> <tr> IE6 IE7 IE8(Q) IE8(S) Firefox Chrome Safari Opera </tr> <tr> <td></td> <td></td> </tr> </table> <p>可见，在 IE 中，触发 hasLayout 的元素，阻止了它自身与子元素间的空白边折叠。</p> <p><strong>情况2：生成 BFC的块级非替换元素，未触发 IE 的 hasLayout。</strong></p> <p>分析以下代码：</p> <pre class="precsshui"><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></pre> <li> <strong>Container</strong> 是宽度为300px，含有 border 的块元素，根据标准，它不会与子元素的 margin 发生空白边折叠。</li> <li> <strong>DIV1</strong> 的宽度没有设置，所以宽度等于 <strong>Container</strong> 的宽度。</li> <li> <strong>DIV1</strong> 的高度也没有设置，所以其高度取决于其内容的高度。</li> <li> <strong>DIV1</strong> 设置了 ‘overflow:hidden’，在 IE6 中未触发 hasLayout，但在 IE7(S) 中触发了 hasLayout。</li> <p>根据 CSS 2.1 8.3.1 Collapsing margins 第三条，生成BFC 的元素不会和在流中的子元素发生空白边折叠。</p> <p><strong>DIV1</strong> 和 <strong>DIV2</strong> 不应该发生空白边折叠，深灰色的 <strong>DIV1</strong> 应该撑满 <strong>Container</strong> 。</p> <p>这段代码在不同的浏览器环境中表现如下：( 注意IE7(S) 此时触发了 hasLayout )</p> <table> <tr> IE6 IE7(Q) IE8(Q) IE7(S) IE8(S) Firefox Chrome Safari Opera </tr> <tr> <td></td> <td></td> </tr> </table> <p>可见，在 IE 中，创建了 BFC，未触发 hasLayout 的元素，它自身与子元素间的空白边折叠还是会发生。</p> <h2>hasLayout 和 BFC 的异同及可能产生的问题</h2> <li>区别 </li> <li>在 IE8(S) 之前的版本中，没有规范中提及的 block formatting context 和 Inline formatting context 概念，而是用 hasLayout 来达到相似的目的。</li> <li>在 IE 中可通过设置 ‘width’、’height’、’min-width’、’min-height’、’max-width’、’max-height’、 ‘zoom’、’writing-mode’ 来触发 hasLayout，而这些特性值的设置不能够使元素创建 BFC。</li> <li>在 IE 中很多元素默认就是拥有布局的，如 IPUNT, BUTTON, SELECT, TEXTAREA 等，但是这些元素在标准中会形成 Inline formatting context （本博客后面会介绍）。</li> <li>共同点 </li> <li>两者都是决定了对内容如何定位及大小计算的规则。</li> <li>两者都决定了与其他元素的相互作用的规则。</li> <li>‘table-cell’ 和 ‘table-caption’ 既是 hasLayout 的元素，又是可以创建 BFC 的元素。</li> <li>浮动元素，绝对定位元素，inline-block 元素以及除 ‘visible’ 外任意值的 overflow(IE7) 在 IE 中可以触发 hasLayout，同时在标准中，又可以创建BFC。</li> <li>可能产生的兼容性问题: </li> <li>由于 hasLayout 和 BFC是对一类事物的不同理解，并且他们的启用条件不尽相同，因此如果一个元素设计时，在 IE 早期版本中触发了 hasLayout ，但在其他浏览器中又没有创建BFC，或者相反，一个元素在 IE 早期版本中没有触发 hasLayout ，在其他浏览器中却创建了 BFC（如设置了 ‘overflow:hidden’ ），将导致页面布局的重大差异。</li> <h2>解决方案</h2> <p>仅当一个元素即在 IE 早期版本中触发了 hasLayout，又在其他浏览器中创建了BFC时，才能避免上述问题的发生。即同时启用上述两者以保证各浏览器的兼容，或者相反，两者皆不启用。</p> <ol> <li>使元素即生成了BFC，又触发了 hasLayout</li> <li>对于触发 hasLayout 的元素，通过 CSS 设置，使它产生BFC；</li> <li>生成 BFC但是没有触发 hasLayout 的元素，通过设置 ‘zoom:1’，使其触发 hasLayout。</li> <li>使元素即没有触发 hasLayout，又没有创建 BFC。</li> </ol> <p>本文部分内容完全来源于W3Help(武利剑) ，本文参考的一些其他资料来源:</p> <p>http://www.w3.org/TR/CSS21/visuren.html#block-formatting</p> <p>http://reference.sitepoint.com/css/haslayout</p> <p>http://blog.csdn.net/pengju_guo/article/details/6945436</p> <p>http://www.qianduan.net/comprehensive-haslayout.html</p> <a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuL2suaHRtbD90PTI=" target="_blank" rel="nofollow"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cHM6Ly9pbWcucGhwLmNuL3VwbG9hZC9jb3Vyc2UvMDAwLzAwMC8wNzEvNjIwYzYwNGY3NTI1MTk5NS5wbmc=" style="margin-top: 30px;" alt="hasLayout && Block Formatting Contexts_html/css_WEB-ITnose" title="hasLayout && Block Formatting Contexts_html/css_WEB-ITnose"></a><p style="float:right;font-size:13px;color:#999;"><span class="red">声明：</span>本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系[e-mail]核实处理。</p> <p class="article-relative-header">相关文章</p> <p class="article-relative-header">相关视频</p> <hr class="layui-clear"> <ul class="article-relative-ul"> <li> <span class="layui-badge-dots"></span><a class="relevant" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuL2Rpdi10dXRvcmlhbC00ODc5NjIuaHRtbA==" target="_blank" rel="nofollow">html下拉菜单文字怎么变小</a> </li> <li> <span class="layui-badge-dots"></span><a class="relevant" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuL2Rpdi10dXRvcmlhbC00ODc5NjAuaHRtbA==" target="_blank" rel="nofollow">HTML里怎么设置thead表头的颜色</a> </li> <li> <span class="layui-badge-dots"></span><a class="relevant" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuL2Rpdi10dXRvcmlhbC00ODYyNzguaHRtbA==" target="_blank" rel="nofollow">html5中元素能拉伸宽度吗</a> </li> <li> <span class="layui-badge-dots"></span><a class="relevant" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuL2Rpdi10dXRvcmlhbC00ODc5ODcuaHRtbA==" target="_blank" rel="nofollow">html中怎么清除li黑点</a> </li> <li> <span class="layui-badge-dots"></span><a class="relevant" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuL2Rpdi10dXRvcmlhbC0yNzM0MzQuaHRtbA==" target="_blank" rel="nofollow">hasLayout && Block Format...</a> </li> </ul> <ul class="article-relative-ul"> <li> <span class="layui-badge-dots"></span><a class="relevant" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuL2NvZGUvNDY5MTguaHRtbA==" target="_blank" title="接口与抽象类01" rel="nofollow">接口与抽象类01</a> </li> <li> <span class="layui-badge-dots"></span><a class="relevant" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuL2NvZGUvNDY5MTcuaHRtbA==" target="_blank" title="类的composer自动加载机制" rel="nofollow">类的composer自动加载机制</a> </li> <li> <span class="layui-badge-dots"></span><a class="relevant" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuL2NvZGUvNDY5MTYuaHRtbA==" target="_blank" title="composer原理与常用命令03" rel="nofollow">composer原理与常用命令03</a> </li> <li> <span class="layui-badge-dots"></span><a class="relevant" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuL2NvZGUvNDY5MTUuaHRtbA==" target="_blank" title="composer原理与常用命令02" rel="nofollow">composer原理与常用命令02</a> </li> </ul> <div class="comment layui-clear CopyrightData"> <div class="J_Header" id="J_Header"> <p class="header-title">网友评论</p> <p class="header-protocol">文明上网理性发言，请遵守 新闻评论服务协议</p>我要评论</div> <div class="text-box layui-clear article_comment_textarea"> <div class="box-left"> <li><a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuamF2YXNjcmlwdDpsb2dpbl90cmlnZ2VyKCk=" target="_blank" rel="nofollow"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=L3N0YXRpYy9pbWFnZXMvdXNlcl9hdmF0YXIuanBn" alt="hasLayout && Block Formatting Contexts_html/css_WEB-ITnose" title="hasLayout && Block Formatting Contexts_html/css_WEB-ITnose"></a></li> <li><a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuamF2YXNjcmlwdDpsb2dpbl90cmlnZ2VyKCk=" target="_blank" rel="nofollow"></a></li> </div> <div class="box-right"> <textarea name="desc" placeholder="请输入内容" class="layui-textarea article_textarea">立即提交 专题推荐 独孤九贱-php全栈开发教程 全栈 170W+ 主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门 玉女心经-web前端开发教程 入门 80W+ 主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门 天龙八部-实战开发教程 实战 120W+ 主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习 作者信息 认证0级讲师 发布技术文章 最新文章 热门排行 html中怎么清除li黑点 html下拉菜单文字怎么变小 HTML里怎么设置thead表头的颜色 html的name和value是什么意思 html如何给背景图片设置透明度 html中怎么让列表横向排列 html5怎么创建跳转页尾超链接 十分钟搞懂form标签中的GET和POST提交方式 404 not found是什么意思 DOM是什么意思 url是什么意思？ 如何改变图片大小 html是什么 html如何创建电子邮件链接 HTML编辑器有哪些？最好用的4款HTML编辑器推荐 如何制作一个简单的HTML登录页面（附代码） 推荐视频教程 javascript初级视频教程 jquery 基础视频教程 视频教程分类 php视频教程 html视频教程 css视频教程 JS视频教程 jQuery视频教程 mysql视频教程 Linux视频教程 Python视频教程 网站首页 PHP视频 PHP实战 PHP代码 PHP手册 词条 手记 编程词典 php培训 ：公益在线php培训，帮助PHP学习者快速成长！ Copyright 2014-2021 https://www.php.cn/ All Rights Reserved | 苏ICP备2020058653号-1关于我们免责申明赞助与捐赠广告合作