【CSS】BFC
先说BFC
BFC是什么？
BFC(Block Formatting Context)，即“块级格式化上下文”。
简单说来，BFC就是指一个环境。
它是W3C CSS2.1规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其它元素之间的关系和相互作用。
一个BFC环境中的元素不会影响其它BFC环境中的布局。例如：浮动元素会形成BFC环境，浮动元素内部的子元素主要受此浮动元素影响，两个浮动元素之间是互不影响的。类似于独立的行政单位。
如何产生BFC？
当一个HTML元素满足以下任何一点，会产生BFC：
- float 的值不为 none
- overflow 的值不为 visible
- display 的值为table-cell，table-caption，inline-block中的任何一个
- position 的值不为 relative 和 static
BFC的表现规则是什么？
1.创建了BFC的元素中，其子元素按文档流一个接一个地放置。在垂直方向上，它们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于 ‘margin‘。
- 两个相邻的普通流中的块框在垂直位置的空白边会发生margin重叠
- 生成BFC的元素不会和在流中的子元素发生margin重叠
2.在BFC中，每个子元素的左外边（即margin边）与包含块的左边相接触（对于从右到左的格式化，右外边接触右边），除非这个子元素创建了新的BFC。
3.BFC 就是页面上的独立容器，容器里面的子元素不会在布局上影响到外面的元素。
4.创建了BFC的子元素不能与同一个BFC环境下的浮动子元素重叠。
5.计算生成BFC的元素高度时，其浮动元素的高度应该参与计算。
举例
例子一：
CSS
body, p { padding:0; margin:0; } #red, #yellow, #orange, #green { width:100px; height:100px; float:left; } #red { background-color:red; } #yellow { background-color:yellow; } #orange { background-color:orange; } #green { background-color:green; }
HTML
<div id="c1">
<div id="red"></div>
<div id="yellow"></div>
</div>
<div id="c2">
<div id="orange"></div>
<div id="green"></div>
</div>
<p>Here is the text!</p>
结果如图
4个浮动元素没有重叠，而是从左到右排列，它们位于同一个BFC环境下。
符合第4个规则：创建了BFC的子元素不能与同一个BFC环境下的浮动子元素重叠。
但是我们希望出现两行两列的效果，该如何做呢？将#c1/#c2创建BFC即可将其高度能够包住其内的浮动子元素，形成两行两列的效果。
增加的CSS
#c1{overflow:hidden;} #c2{overflow:hidden;}
结果是
例子二：不和浮动元素重叠
CSS
.aside{background:#f00;width:170px;float:left;height:300px;} .main{background:#090;height:100%;}
HTML
<div class="aside"></div>
<div class="main"></div>
此时，绿色的块被红色块挡住了，二者重叠了，因为我们可以加一句
.main { overflow: hidden; }
结果是
符合第4个规则：创建了BFC的子元素不能与同一个BFC环境下的浮动子元素重叠。
总结
还没有结束，hasLayout神马的，暂未更新
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
