神奇的BFC
2017-06-16 本文已影响35人
baiying
BFC(block formatting context):块级格式化上下文
简单地理解BFC就是一个HTML块并且满足以下条件之一才会触发
-
float不为none -
overflow不为visible -
position的值不为static或者relative -
display的值为table-cell,flex,inline-block,inline-flex,table-caption其中的一个.
创建一个BFC
只要css样式满足上述条件任意一个都会创建一个BFC
例如:
//HTML代码
<body>
<div id = 'container'>
<p id = 'a'>aaa</p>
<p id = 'b'>bbb</p>
<div id = 'con'>
<p id = 'c'>ccc</p>
</div>
</div>
</body>
//css样式
#container{
overflow:hidden; //此样式的设置已经创建了一个BFC
background-color:black;
}
BFC的运用
盒子对齐
在BFC中每个盒子的外边框紧挨着包含块的左边框(或者有边框,依定具体的排列方式)
例如:
盒子对齐
避免边距折叠
理论上相邻的两个块之间的边距应当是各自所设置的编剧之和,但是实际上并不会,会出现边距折叠的问题:
- 若两个块设置的margin值相等,这真实间距就为这个值,而不是2倍
- 若不相等,则较大的margin值会是两个块的间距值
但是当两个块不在同一BFC中就不存在边距折叠的问题,根据这一原理我们将两个块放在不同的BFC中就可以很好的避免边距折叠的问题了.
例如上图中给三个块设置的上下margin值是相同的,但是红色块和蓝色块在同一BFC中产生折叠,而把绿色块放到了另一个BFC中边距就是二倍了.
BFC清除浮动
这其实就是我们常见的清除浮动的方式之一
当一个元素包含的都是浮动元素时,它自身的高度将会塌陷,会导致许多意想不到的问题
解决方式:给这个父级元素设置overflow:hidden,此时创建了一个BFC,将浮动元素都包含了进去,浮动的元素因此回归正常文档流.
BFC创建多列布局
依据:BFC不会与float box 叠加
我们通常实现两列布局时会采用左边左浮动,右边设置margin值,因为如果不设置就会出现重合,环绕的问题.
利用BFC实现两列布局,我们可以让左边左浮动,右边触发一个BFC,就不会与左边重叠
//HTML
<body>
<div id = 'a'>aaa</div>
<div id = 'b'>bbb</div>
</body>
//css
#a{
background-color:red;
float:left;
}
#b{
background-color:blue;
height:100px;
}
此时的第一个div已经脱离了文档流是浮动在第二个div上边的
如下图
当我们的css样式修改如下
//css
#a{
background-color:red;
float:left;
}
#b{
background-color:blue;
height:100px;
overflow:hidden
}
效果就是我们想要的啦:
两列布局
