BFC

来源：互联网发布：热力学数据计算软件编辑：程序博客网时间：2024/05/19 20:56

这个东东搞懂了的话，感觉布局的原理就会理解起来很容易。关键的参考资料，是css规范http://www.w3.org/TR/CSS21/visuren.html#block-formatting。在上一篇文章中简单的介绍了一下，那个地方主要使用BFC来清除浮动，当然明白BFC的特性是很重要的啦，所以在这儿再写一点儿东西，写点代码，看看效果.

特性一：
BFC中的box的左边界会靠着包含框的左边框，即使其中已经包含float元素。

html代码：

<style>body{width:1000px;margin:0 auto;border:4px solid black;}div{margin:10px;}#div1{float:left;width:500px;height: 200px;border:4px solid blue;background-color: pink;}#div2{height: 400px;border:4px solid red;background-color: yellow;/*overflow: hidden;*//*通过设置overflow为hidden，可以使该div成为一个BFC，BFC的特性之一就是不会与其他浮动元素重叠*/}</style></head><body><div id="div1">I am a float:left div</div><div id="div2">I am a normal div 。Block Formatting Context （块格式化上下文）是 W3C CSS 2.1 规范中的一个概念，在CSS3中被修改为flow root。格式化则表明了在这个环境中，元素处于此环境中应当被初始化，即元素在此环境中应当如何布局等。元素如果创建了BFC，那么BFC决定了如何对其内容进行定位，以及它与其他元素的关系和相互作用。创建了BFC的元素会按照如下的方式对其子元素进行排列：<br>  元素的子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于 'margin' 特性。在 BFC中相邻的块级元素的垂直边距会折叠（collapse）。 <br> 元素的子元素中，每一个子元素左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边）， 即使存在浮动也是如此（尽管一个子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC，如它自身也是一个浮动。</div></body>

效果：

此处黄色背景的div靠着body的边框（留白是margin），如果去掉div2中的注释，那么div2就是一个BFC，

BFC的特性之二：BFC不会和float元素重叠，可以利用该特性实现多栏布局

所以去掉朱时候，div2就不会和div1重叠，效果如图：

特性三：
同处于一个BFC的块元素的上下margin会发生折叠

<style>div{border:1px solid red;margin:50px;}</style></head><body><div id="p1">2 什么情况下会创建BFC  CSS 规范说明了在下列这些情况下会创建新的 block formatting context：<ul><li>浮动元素（float: left | right）；</li><li>绝对定位元素（position: absolute | fixed）；</li><li>行内块元素（display: inline-block）；</li> <li>表格的单元格（display: table-cells，TD、TH）；</li> <li>表格的标题（display: table-captions，CAPTION）；</li><li>'overflow' 特性不为 visible 的元素（除非该值已经传播到viewport?）；</li> <li>表格元素创建的 "匿名框"  </li></ul></div><div id="p2">

......</div></body>

此处的两个div同处于body这个根元素下，根元素会创建BFC，但是body本身不是BFC。

效果如图：

发现连个div之间留白应该是100px，但是此处却是50px。两个发生了折叠。但是如果如果用一个wrapper将两个div包裹起来，各自创建一个BFC，那么两个div就不会产生折叠。

特性之四：

创建了BFC 的元素中，子浮动元素也会参与高度的计算，即不会发生高度‘塌陷’,可以利用这个特性来实现清除浮动的功能

特性之五：创建了BFC的元素不会与它的子元素发生外边距折叠。

在百度文库总有一篇将BFC，很好的文章，http://wenku.baidu.com/link?url=1b1uaX81yAl1BGqsdRhrwvseN5fWPjiuhQEdkZuX8YfVEC6xB0j657jGntjLC8tG8uXpQk_hJD2Yap2480iUlePxHEZLC29DSwE358EfR1a

0 0

BFC