hasLayout&&BlockFormattingContexts_html/css

, , , 
, 
, , , , <fieldset>, <legend>, <embed>, <object>, <marquee></pre></div> </li> <li>可触发 hasLayout 的 CSS 特性： <div class="51ds_code" style="position: relative;"><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></div> </li> <li>IE7 还有一些额外的属性(不完全列表)可以触发 hasLayout ： <div class="51ds_code" style="position: relative;"><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></div> </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>BFC是 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>触发方式 <div class="51ds_code" style="position: relative;"><pre class="precsshui">float:(任何值除了none)overflow:（任何值除了visible）display:(table-cell/table-caption/inline-block)position:(任何值除了static/relative)</pre></div> </li> <p>Tips:我们有时会用overflow:hidden的方法去清除浮动，就是因为触发了元素的块格式化上下文(IE6 7要申明zoom为1)，这个方法的确简单，但很暴力 ? -#</p> <h2>3. hasLayout 和 BFC 的特点</h2> <h3>3.1 在触发 hasLayout 的元素和创建了 BFC的元素中，浮动元素参与高度的计算</h3> <p>情况1：没有创建 BFC的块级非替换元素，触发了 IE 的 hasLayout。</p> <p>分析以下代码：</p> <div class="51ds_code" style="position: relative;"><div class="51ds_code" style="position: relative;"><pre class="precsshui"> simple text in flow float:left </pre></div></div> <li>Container 没有创建 block formatting context。</li> <li>Container 的 ‘zoom:1’设置，是为了触发 IE 中的 hasLayout；</li> <li>Container 的高度值为 auto，并且 ‘overflow’ 的值为默认的 ‘visible’；</li> <li>SPAN1 是一个行内元素， DIV1 是一个处于普通流中的块元素；</li> <li>DIV2 是一个浮动的块级元素。</li> <p>根据 CSS2.1 规范第 10.6.3 部分的高度计算规则，在进行普通流中的块级非替换元素的高度计算时，浮动子元素不参与计算。</p> <p>所以，在进行 Container 高度计算时，只受 SPAN1 和 DIV1 的影响，应该是它们两个的高度之和，所以最终银色部分不应该包含金色的部分。</p> <p>这段代码在不同的浏览器环境中表现如下：</p> <table> <tr> IE6 IE7 IE8(Q) IE8(S) Firefox Chrome Safari Opera </tr> <tr> <td></td> <td></td> </tr> </table> <p>去掉 Container 的 ‘zoom:1′ 后，各浏览器表现一致：</p> <p>可见，IE 浏览器中，触发 hasLayout 的元素在进行高度计算的时候，其浮动的子元素也会参与运算。</p> <p>情况2：创建了 BFC的块级非替换元素，未触发 IE 的 hasLayout。</p> <p>分析以下代码：</p> <div class="51ds_code" style="position: relative;"><div class="51ds_code" style="position: relative;"><pre class="precsshui"> simple text in flow float:left </pre></div></div> <li>Container 的 ‘overflow:hidden;’ 创建了BFC；</li> <li>Container 的 ‘overflow:hidden;’，在 IE6 中未触发 hasLayout，但在 IE7(S) 中触发了 hasLayout；</li> <li>Container 的高度值为 ‘auto’；</li> <li>SPAN1 是一个行内元素，DIV1 是一个处于普通流中的块元素；</li> <li>DIV2 是一个浮动的块级元素。</li> <p>根据 CSS2.1 规范第10.6.7部分的高度计算规则，在计算生成了 BFC的元素的高度时，其浮动子元素应该参与计算。</p> <p>所以，在进行 Container 高度计算时，DIV2 也应该参与计算，所以最终银色部分应该包含金色的部分。</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>可见，只要 Container 创建了 BFC，其浮动子元素就会参与其高度计算（IE7(S) 是由于 hasLayout 导致与其他浏览器的效果相同）。</p> <h3>3.2 与浮动元素相邻的、触发了 hasLayout 的元素或创建了 BFC 的元素，都不能与浮动元素相互覆盖</h3> <p>如果浮动元素的两侧有足够的空间放置该元素，则元素会紧邻浮动元素放置，必要时，该元素的宽度将会被压缩。否则它们可 能会定位到浮动元素的下方。</p> <p>情况1：没有创建 BFC 的块级非替换元素，触发了 IE 的 hasLayout。</p> <p>分析以下代码：</p> <div class="51ds_code" style="position: relative;"><div class="51ds_code" style="position: relative;"><pre class="precsshui"> background:url("grid2a.png") repeat;"> Float Block If I had a single flower for every time I think about you, I could walk forever in my garden. </pre></div></div> <li>DIV1 是一个浮动元素，背景是 50% 的透明</li> <li>DIV2 的 ‘zoom:1′ 触发了 IE 中的 hasLayout。</li> <p>其中，grid2a.png 背景是 100px * 100px 的图片：</p><script type="text/javascript" src="https://jss.51dongshi.net/pcwz/wenzhong.js"></script> <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>情况2：创建了 BFC的块级非替换元素，未触发 IE 的 hasLayout。</p> <p>分析以下代码：</p> <div class="51ds_code" style="position: relative;"><div class="51ds_code" style="position: relative;"><pre class="precsshui"> background:url("grid2a.png") repeat;"> Float Block If I had a single flower for every time I think about you, I could walk forever in my garden. </pre></div></div> <li>DIV1 是一个浮动元素，背景是50%的透明</li> <li>DIV2 的 ‘overflow:hidden;’ 在 IE6 中未触发 hasLayout，但在 IE7(S) 中触发了 hasLayout。</li> <p>根据 CSS 2.1 9.5 Floats 中的描述，创建了BFC的元素不能与浮动元素重叠， 所以，DIV2 应该有一部分被 DIV1 覆盖。</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> <h3>3.3 触发 hasLayout 的元素和创建了 BFC的元素不会与它们的子元素发生外边距折叠</h3> <p>情况1：没有生成BFC的块级非替换元素，触发了 IE 的 hasLayout。</p> <p>分析以下代码：</p> <div class="51ds_code" style="position: relative;"><div class="51ds_code" style="position: relative;"><pre class="precsshui"> content </pre></div></div> <li>Container 是宽度为300px，含有 border 的块元素，根据标准，它不会与子元素的 margin 发生空白边折叠。</li> <li>DIV1 的宽度没有设置，所以宽度等于 Container 的宽度。</li> <li>DIV1 的高度也没有设置，所以其高度取决于其内容的高度。</li> <li>DIV1 设置了 ‘zoom:1’，在 IE 中触发了 hasLayout。</li> <p>根据 CSS 2.1 8.3.1 Collapsing margins 第一条，两个相邻的普通流中的块框在垂直位置的空白边会发生折叠现象。</p> <p>DIV1 和 DIV2 应该发生空白边折叠，深灰色的 DIV1 应该刚好包含 ‘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>情况2：生成 BFC的块级非替换元素，未触发 IE 的 hasLayout。</p> <p>分析以下代码：</p> <div class="51ds_code" style="position: relative;"><div class="51ds_code" style="position: relative;"><pre class="precsshui"> content </pre></div></div> <li>Container 是宽度为300px，含有 border 的块元素，根据标准，它不会与子元素的 margin 发生空白边折叠。</li> <li>DIV1 的宽度没有设置，所以宽度等于 Container 的宽度。</li> <li>DIV1 的高度也没有设置，所以其高度取决于其内容的高度。</li> <li>DIV1 设置了 ‘overflow:hidden’，在 IE6 中未触发 hasLayout，但在 IE7(S) 中触发了 hasLayout。</li> <p>根据 CSS 2.1 8.3.1 Collapsing margins 第三条，生成BFC 的元素不会和在流中的子元素发生空白边折叠。</p> <p>DIV1 和 DIV2 不应该发生空白边折叠，深灰色的 DIV1 应该撑满 Container 。</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><p><script type="text/javascript" src="https://jss.51dongshi.net/pcwz/dysph.js"></script></div>    
<div class="downbox clearfix">
    <div class="ico"><img src="https://js.51dongshi.net/tpl/pc2/images/document.png" alt="文档"></div>
    <div class="txt">
        <h4>hasLayout&&BlockFormattingContexts_html/css</h4>
        <div class="co">hasLayout&&BlockFormattingContexts_html/css_WEB-ITnose:转自：http://www.smallni.com/haslayout-block-formatting-contexts/ 因为本人脑子不好使，自己打印出了一张hasLayout和Block Formatting Contexts（以下简称BFC）的触发表贴在办公桌上（也可以称作创建了BFC），每天看看就记住了，不知道大家有没有对</div>
        <div class="tj"><b>推荐度：</b><div class="tj_stars_list"><i class="tj_stars tj_05"></i></div></div>
    </div>
    <div class="btn">
        <a href="javascript:;"  class="html2word" data-model="article" data-id="arhhsg" title="文档下载">
            <b>点击下载本文</b>
            <span>文档为doc格式</span>
        </a>
    </div>
</div>
              
       <script>keji_detail_ga('article_content_bottom');</script> 
                <div class="tvideo_tag">
            标签：
                        <a href="/tlist-246007/">html</a>
                        <a href="/tlist-5673/">css</a>
                        <a href="/tlist-5051247/">formatting</a>
                    </div>
                
            
            <div class="tvideo_box tvideo_box_tab"> 
                    <div class="hd">
                        <ul><li class="on">热门焦点</li><script>keji_detail_ga('hot_jiaodian_tab_title');</script></ul>
                    </div>
                    <div class="bd">
                        <ul class="ult_jpic clearfix">
                            <script>get_hot_jiaodian_content('wz_hot_jiaodian',33,'hot',1);</script>
                            
                            
                        </ul>
                        
                    </div>
            </div>
            
        </div>
        <!--中间文章 end-->
        <!--右侧专题 star-->
        <div class="ult_zt">
            <script>keji_detail_ga('article_right_top');</script>
            <div class="ult_ztbox">
                <h4>最新推荐</h4>
                <ul class="tvideo_r_a clearfix">
                    <script>get_detail_right('wz_right_new',33,'')</script>
                
                
                
            </ul>
            </div>
            <script>keji_detail_ga('article_right_middle');</script>
            
            <div class="ult_ztbox">
                <h4>猜你喜欢</h4>
                <ul class="telist_rb clearfix">
                    <script>get_detail_right('wz_right_love',33,'')</script>
                    
                   
                    
                </ul>
            </div>
           
            <script>keji_detail_ga('article_right_new_bottom');</script>
            
           
            <div class="ult_ztbox">
                <h4>热门推荐</h4>
                <ul class="tvideo_r_b clearfix">
                    <script>get_detail_right('wz_right_hot',33,'')</script>
                    
                </ul>
            </div>
           
            <script>keji_detail_ga('article_right_bottom');</script>
        </div>
        <!--右侧专题 end-->
        <div style="display:none"><a href="https://www.51dongshi.net/wzztf/ar/arhhsg/">专题</a>
</div>
    </div>

</div>
<script src="https://js.51dongshi.net/plug/qrcode/qrcode.min.js"></script>
<script src="https://js.51dongshi.net/js/share.js" charset="UTF-8"></script>
<script type="text/javascript" src="https://js.51dongshi.net/tpl/pc2/js/waypoints.min.js"></script>
<script type="text/javascript" src="https://js.51dongshi.net/tpl/pc2/js/icon_step.js"></script>
<style>
#qrcode{padding: 15px;background: #fff;}
</style>
<div id="qrcode" style="display: none"></div>
<script>new QRCode(document.getElementById("qrcode"), "https://m.51dongshi.net/eedfarhhsg.html");</script>
<iframe src="https://hits.51dongshi.net/?biao=ho_article&id=915534" border="0" frameborder="0" style="width: 0px; height: 0px"></iframe>
<script src="https://js.51dongshi.net/js/shHighlighter.js"></script>
<link rel="stylesheet" href="https://jss.51dongshi.net/js/fffz/css/box.css">
<script id="fffz" data-domain="//www.51dongshi.net/index" src="https://js.51dongshi.net/js/fffz/fffz.js"></script>
<script type="text/javascript" src="https://jss.51dongshi.net/pcwz/tj.js"></script>
<div style="display:none"><script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?4b1ebb0298b66c8a109db070c4878833";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
    </script>
    </div>

<!--foot star-->
<div class="footer">
    <div class="m_box">
        <div class="footer_in"> 
            <a href="#" target="_blank">产品服务</a>
            <a href="#" target="_blank">发展历程</a>
            <a href="#" target="_blank">企业资讯</a>
            <a href="#" target="_blank">企业文化</a>
            <a href="#" target="_blank">关于我们</a>
            <a href="#" target="_blank">加入我们</a>
            <a href="#" target="_blank">联系我们</a>
            <a href="#" target="_blank">网站导航</a>
            <a href="#" target="_blank">网站律师</a>
        </div>
        <ul class="ftrlist">
            <li>
                 <a rel="nofollow" href="https://www.itrust.org.cn" target="_blank">
                     <img src="https://js.51dongshi.net/tpl/pc2/images/footer_logo01.gif" alt="中国互联网协会"></a>
             </li>
             <li>
                 <a rel="nofollow" href="https://www.12377.cn/" target="_blank">
                     <img src="https://js.51dongshi.net/tpl/pc2/images/12377logo.png" alt="中国互联网举报中心"></a>
             </li>
             <li>
                 <a rel="nofollow" href="http://www.cyberpolice.cn/" target="_blank">
                     <img src="https://js.51dongshi.net/tpl/pc2/images/footer_logo05.gif" alt="网络110报警服务"></a>
             </li>
             <li>
                 <a rel="nofollow" href="http://www.creditchina.gov.cn/" target="_blank">
                     <img src="https://js.51dongshi.net/tpl/pc2/images/creditchina.gif" alt="信用中国"></a>
             </li>
             <li class="last">
                 <a rel="nofollow" href="http://www.shdf.gov.cn/shdf/channels/740.html" target="_blank">
                     <img src="https://js.51dongshi.net/tpl/pc2/images/footer_logo11.png" alt="中国扫黄打非网"><p>中国扫黄打非网</p>
                 </a>
             </li>
        </ul>
        <div class="footer_co"> 
            <a href="/" class="footlogo"><img src="https://js.51dongshi.net/tpl/pc2/images/logo.png" alt="动视"></a>
            <p>Copyright © 2019-2025 <a href="/" target="_blank">51dongshi.net</a> 版权所有</p>
            <p>
                <a rel="nofollow" target="_blank" href="https://beian.miit.gov.cn/">赣ICP备2023002352号-34</a>
            </p>
            <p>违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务</p>
            
        </div>
    </div>
</div>
<!--foot end-->


<a href="#0" class="cd-top">Top</a>

<script type="text/javascript">
$(function(){
	var _line=parseInt($(window).height()/3);
	$(window).scroll(function(){
		if ($(window).scrollTop()>100) {
			$('.edu_top').css({'position':'fixed','top':'0','z-index':'99'})
		}else{
			$('.edu_top').css({'position':'relative','top':'0'})
		}
    })
})

</script>
<script type="text/javascript" src="https://jss.51dongshi.net/ga/all.js"></script>

</body>
</html>