由布局学习CSS——浮动清除的深度探究（hasLayout和BFC对浮动的影响）

在前面的文章中对hasLayout有过介绍，其实个人理解，对于haslayout和block formating context它们有许多的共同点，甚至可以说它们是相同的功能的不同说法（这句话就鉴定）。下面是对一些术语的简介。

haslayout：'Layout' 是 IE 的专有概念，它决定了元素如何对其内容进行定位和尺寸计算，与其他元素的关系和相互作用，以及对应用还有使用者的影响。在 IE 浏览器中，一个元素要么自己对自身的内容进行组织和计算大小，要么依赖于包含块来计算尺寸和组织内容。为了协调这两种方式的矛盾，渲染引擎采用了 'hasLayout' 属性，属性值可以为 true 或 false。当一个元素的 'hasLayout' 属性值为 true 时，我们说这个元素有一个布局（layout），或拥有布局。

包含块：一般来说，盒子本身就为其子孙建立了 containing block，用来计算内部盒子的位置、大小，而对内部的盒子，具体采用哪个 containing block 来计算，需要分情况来讨论。

由布局学习CSS——浮动清除的深度探究（hasLayout和BFC对浮动的影响）

block formating context：Block Formatting Context （块格式化上下文）是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。关于 Block Formatting Context 的详细信息，请参考 W3C CSS 2.1 9.4.1 Block formatting contexts。在本文中我们需要关注一点的就是：在 Block Formatting Context 中，每一个元素左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边），即使存在浮动也是如此（尽管一个元素的内容区域会由于浮动而压缩），除非这个元素也创建了一个新的 Block Formatting Context 。

haslayout和Block Formatting Context和浮动的关系：

（1）在触发 hasLayout 的元素和创建了 Block Formatting Context 的元素中，浮动元素参与高度的计算。

　　　根据 CSS2.1 规范第 10.6.3 部分的高度计算规则，在进行普通流中的块级非替换元素的高度计算时，浮动子元素不参与计算。在IE 浏览器中，触发 hasLayout 的元素　　　在进行高度计算的时候，其浮动的子元素也会参与运算。根据 CSS2.1 规范第10.6.7部分的高度计算规则，在计算生成了 block formatting context 的元素的高度时，　　　　其浮动子元素应该参与计算。

　　　应用：使用overflow:auto;zoom:1;方式清除浮动

　　　分析：在这里通过设置overflow：auto创建了BFC，zoom：1触发了haslayout。

　　　实例：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css" rel="stylesheet">
</style>

</head>
<body>
<div id="Container" style="border:1px solid gold; zoom:1; overflow:hidden;">
<div id="floatChild" style="float:left; background-color:green; width:50px; height:50px;">
                asdsds
</div>
</div>
</body>

</html>

由布局学习CSS——浮动清除的深度探究（hasLayout和BFC对浮动的影响）

（2）与浮动元素相邻的、触发了 hasLayout 的元素或创建了 Block Formatting Context 的元素，都不能与浮动元素相互覆盖。

　　　应用：实现新闻列表

由布局学习CSS——浮动清除的深度探究（hasLayout和BFC对浮动的影响）

　　实例：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css" rel="stylesheet">
        .item{width:250px;}
        .pic{float:left;}
        .content{zoom:1; overflow:hidden;}
</style>

</head>
<body>
<div id="Container" style="border:1px solid gold; zoom:1; overflow:hidden;">
<div class="item">
<div class="pic">
<a href="#" title="testImage">
<img src="test.jpg"  alt="test" title="testPic" style="width:50px; height:50px"></img>
</a>
</div>
<div class="content">这个娃是我弟。。。哈哈。。。这个娃是我弟。。。哈哈。。。这个娃是我弟。。哈哈
                    这个娃是我弟。。。。。。</div>
</div>
</div>
</body>

</html>

由布局学习CSS——浮动清除的深度探究（hasLayout和BFC对浮动的影响）

　　　　分析：与浮动元素相邻的、触发了 hasLayout 的元素或创建了 block formatting context 的元素，都不能与浮动元素相互覆盖。如果浮动元素的两侧有足够的空间放置　　　　该元素，则元素会紧邻浮动元素放置，必要时，该元素的宽度将会被压缩。否则它们可能会定位到浮动元素的下方。本例中，通过设置overflow：hidden和zoom：1 ，　　　　分别创建了BFC和触发了haslayout。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：由布局学习CSS——浮动清除的深度探究（hasLayout和BFC对浮动的影响） - Python技术站