今天在这里谈谈css中BFC。“BFC”是Block Formatting Context的缩写,这个概念是由CSS2.1提出来的,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。满足以下任何一条件,即可形成“BFC”。
1、float的值不为none。
2、overflow的值不为visible。
3、display的值为table-cell, table-caption, inline-block中的任何一个。
4、position的值不为relative和static。
“BFC”的作用可以通过解决以下三个问题得到很好的体现:
问题一:避免和浮动元素重叠。如果一个浮动元素后面跟着一个非浮动的元素,那么就会产生一个覆盖的现象,这时候我们可以通过以下方法解决,
eg:
<div style="float:left; border: 2px solid red"> 123</div>
<div style="border: 2px solid blue;overflow:hidden;">
qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq
qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq
qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq
qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq
qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq
</div>
注:蓝色背景处是解决问题的关键。而这就属于通过创建一个“BFC”来解决布局问题。
问题二:清除元素的内部浮动。只要把父元素设为BFC就可以清理子元素的浮动了。然而对于IE6,需要加上zoom:1。在这里就会引出另一个概念:HasLayout,
它是IE浏览器引擎内部特有的属性,它可以影响到元素的定位和元素之间的相互作用。当一个元素的HasLayout属性为true时,这个元素才可以决定自己和其子孙 元素的布局。为数不多的元素默认这个属性值为true,包括:
- body and html
- table, tr, th, td
- img
- hr
- input, button, file, select, textarea, fieldset
- marquee
- frameset, frame, iframe
- objects, applets, embed
所以,当发现有些元素的布局在IE下有异常时,可以有充分的理由来怀疑可能是hasLayout属性为false。而且这个属性值不能直接设置。一个元素要么默认拥有,要 么通过设置特定的CSS属性来获取。
问题三:嵌套元素的margin边距折叠。
按照BFC的定义,只有同属于一个BFC时,两个元素才有可能发生垂直Margin的重叠,这个包括相邻元素,嵌套元素,只要他们之间没有阻挡(例如边框,非空 内容,padding等)就会发生margin重叠。因此要解决margin重叠问题,只要让它们不在同一个BFC就行了,但是对于两个相邻元素来说,意义不大,没有必要给它 们加个外壳,但是对于嵌套元素来说就很有必要了,只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠了。
以上就是我现在对“BFC”的认识。