[autonomic learning]什么是BFC?
BFC可以解决的问题:
1.(BFC与margin)同一个父级块框下,兄弟元素和父子元素的margin会发生重叠问题
2.(BFC与float)父元素高度塌陷问题、兄弟元素覆盖问题
-
def(定义):块级格式化上下文
-
create/触发:
(满足下列任意一个或多个条件即可触发bfc)根元素或其它包含它的元素; //
float不为none; //浮动
position:absolute/fixed;//绝对定位和固定定位
display:inline-block; //inline-block,flex,inline-flex,table-cell
表格单元格 display:table-cell;
overflow不为visible; //hidden触发bfc
display:flex/inline-flex; -
约束规则:
• 生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一 个包含块的顶部,俩个相邻子元素之间垂直距离取决于元素margin特 性。在BFC中相邻的块级元素外边距会折叠。
• 生成BFC元素的子元素中,每一个子元素的外边距和包含块的左边界相接 触,(对于从右到左的格式化,右外边距和右边界相接触),除非这个 子元素也创建了一个新的BFC(如它自身也是一个浮动元素)。
4.特性(two examples):
【1】阻止垂直外边距折叠
属于同一个BFC的两个相邻块级子元素(元素都要在文档流中)的上下margin会发生重叠—— 分为两个BFC就可以消除这种margin 重叠。具体做法如下,添加了一个.div4,给两个兄弟块级子元素中的任意一个加bfc。如果要是父子结构的,就给父级元素加bfc。
<style>
.dv {
width: 400px;
height: 400px;
border: 1px solid slateblue;
}
.dv2 {
width: 200px;
height: 100px;
background: salmon;
margin-bottom: 30px;
overflow: auto;
}
.dv3 {
width: 200px;
height: 100px;
margin-top: 60px;
background: seagreen;
}
.div4{
position: absolute;
//float: left;等等上述触发bfc的任意条件
}
</style>
<div class="dv">
<div class="dv2"></div>
<div class="div4">
<div class="dv3">
IE6、IE7中, // function foo(){ // console.log(a); // } // function bar(){ // var a =3 ;
</div>
</div>
</div>
【2】包含浮动元素
我们用一个例子说明一下
内容会环绕着浮动元素
<style>
.second{
width: 400px;
padding: 10px;
border: 1px solid slateblue;
}
.float{
float: left;
width: 200px;
height: 50px;
background: salmon;
}
.s1{
background: slategray;
}
</style>
<div class="second">
<div class="float">
</div>
<div class="s1">
IE6、IE7中, // function foo(){ // console.log(a); // } // function bar(){ // var a =3 ;
IE6、IE7中, // function foo(){ // console.log(a); // } // function bar(){ // var a =3 ;
</div>
</div>
需求1:清除环绕(为其本身创建bfc)
若是给.s1{position:absolute;}会造成橘色块(下)与文字块(上)上下排列,边框变成文字块的高度;
若是给.s1{float:right;}会造成橘色块(上)与文字块(下)上下排列,边框变成文字块的高度;
若是给.s1{overflow: hidden;}
特别地当元素里面的文字较少时,父元素会出现高度坍塌,浮动元素脱离文档流,父元素高度随着文本的减少而降低。
所以我们的需求2:改变坍塌(为父级元素添加bfc)
.second{overflow: hidden;}
扩展:一个可以直接触发BFC的属性display:flow-root
;
实际上BFC就是一个属性/功能,它更好的帮助我们理解css的可视化格式模型。