锋利的BFC
在初学前端的时候,我们会经常碰到各种各样的布局问题,尤其当使用浮动的时候,然而学习了BFC之后,其中的一些怪异现象,也因此成为理所当然,会有一种拨开云雾的快感。
下面简单介绍下BFC,究竟什么是BFC,它到底有什么作用和特点?
链接:http://www.w3.org/TR/CSS21/visuren.html#block-formatting是w3c关于BFC的描述。
一、什么是BFC
BFC(Block Formatting Context),即块格式化上下文,它是CSS2.1里的一个概念,我们可以简单的把它理解成一个环境,它规定了元素内容如何布局和定位,以及元素间的相互影响和作用。触发了BFC的元素会按照如下方式对其子元素进行排列:
1、子元素会一个接一个的放置。垂直方向上子元素的起点是包含块的顶部,在BFC中相邻的块级元素在垂直方向上,会发生margin折叠现象。
2、每一个子元素的左外边与包含块的左边相接触(对于从右到左的格式化,右外边接触右边),除非这个元素也触发了BFC,如自身也是一个浮动元素。
二、如何触发BFC
1、float值为left|right
2、display值为inline-block|table-cell|table-caption
3、overflow值不为visible(除非该值已经传到viewport)
4、position值为absolute|fixed
三、BFC有什么作用
BFC的主要用途是清除元素浮动和实现多栏布局
1、包含浮动元素
触发了BFC的元素中,子浮动元素也会参与高度的计算,从而避免发生高度“塌陷”,实现了清除浮动的功能。
<div id="container" style="background:blue;width:300px;overflow:hidden"> <div id="div1" style="background:green;height:200px">in flow</div> <div id="div2" style="float:left;background:red">flow:left</div> </div>
上面代码中,container属性overflow值为hidden,触发了BFC,将div2也包含进来。效果图如下:
如果去掉overflow:hidden,即overflow为默认值visible,则显示如下:
2、不被浮动元素覆盖
与浮动元素相邻的,触发了BFC的元素,都不能与浮动元素相互覆盖,因此我们可以利用此特性实现多栏布局
<div id="container" style="background:blue;width:300px"> <div id="div2" style="float:left;background:red;filter:alpha(opacity=50);opacity:0.5;">flow:left</div> <div id="div1" style="background:green;height:200px;overflow:hidden">in flow</div> </div>
上面代码div1触发了BFC,效果图如下:
如果去掉div1中的overflow:hidden,则div2会覆盖div1,显示如下:
注意:当BFC宽度大于容器剩余宽度时,浏览器可能会发生兼容性问题,主要有两种情况:1、BFC显示在浮动元素下一行;2、BFC显示在浮动同一行,并且溢出容器。
3、阻止父子元素margin折叠
触发了BFC的元素不会与它的子元素发生外边距折叠
<div id="div1" style="width:200px; height:200px;background:red;overflow:hidden;"> <div id="div2" style="width:100px; height:100px;background:green;margin:50px;"></div> </div>
以上代码显示如下:
如果去掉div1中的overflow:hidden,则根据 CSS 2.1 8.3.1 Collapsing margins 第一条,两个相邻(兄弟或者父子)的普通流中的块框在垂直位置的空白边(只要他们之间没有阻挡(例如边框,非空内容,padding等))会发生折叠现象,显示发生变化如下:
四、补充
IE中的haslayout和标准的BFC之间的区别和联系。
区别:
1、在IE8之前,还没有 Block Formatting Context和Inline Formatting Context的概念,而是通过hasLayout来实现相似的目的。
2、在IE中可以通过设置width、height、min-width、min-height、max-width、max-height、zoom(IE6)和writting-mode来触发hasLayout,而这些属性值的设置不能触发BFC。
3、在IE中,一些元素默认就有hasLayout,如input、button、select、textarea,但是这些元素会触发Inline Formatting Context。
相同点:
1、两者都规定了如何对内容进行定位、大小计算,以及和其他元素的相互作用。
2、浮动元素、绝对定位元素、inline-block元素、除visible以外的overflow、table-cell和table-caption既可以触发BFC又可以触发hasLayout。
兼容:
为了兼容IE8-,那么同时触发BFC和hasLayout,那么都不触发。
1、对于触发hasLayout的元素,如input,通过设置CSS属性来触发BFC。
2、对于触发BFC,但没有触发hasLayout的元素,通过设置zoom:1来触发hasLayout。
外边距折叠的问题:
发生外边距折叠的条件:两个元素在垂直方向上有相邻的外边距时。
1、当兄弟元素时,元素间的距离折叠;
2、当父子元素时,子元素的外边距折叠到父元素上。
发生外边距折叠时的计算法则:
1、两个元素的外边距都是正值时,取较大者;
2、两个元素的外边距一正一负时,取两者之和。