【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神马的,暂未更新
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。