1.BFC(块级格式化上下文),既不是css属性,也不是一段代码。
2.BFC五条规则:
a.BFC有隔离作用,内部元素不会受到外部元素的影响。
b.一个元素只能存在于一个BFC中,如果同时存在两个BFC中,违背隔离规则。
c.BFC中元素按照正常流排序,元素之间空隙由margin控制。
d.BFC中的内容不会与外部浮动元素重叠(隔离效果)。
f.在计算其高度的时候,需要包括其中的浮动子元素的高度。
3.创建BFC
满足其中一条即可。
a.根元素,即html元素;
b.float属性-不为none的浮动元素;
c.position属性-absolute和fixed定位元素;
d.overflow属性-不为visible的块级元素;
e.display属性-inline-block、table-cell(相当于th【th加粗居中】和td)、table-caption(相当于caption)或伸缩盒(flex和inline-flex)元素。
4.用途
1.清除浮动
a。当一个元素被定义为浮动,附近的文字即使不相邻也会围绕着他。
ul{
border:1px solid green;
list-style:none;
width:100px;
height:100px;
}
html
<ul style="overflow:hidden;">
<li style="float:left"></li>
</ul>
<hr/>
结果分析:通过给li的父级元素添加BFC,即给ul添加overflow:hidden,起到隔离作用,防止了文字环绕。
b。浮动元素会脱离文档流,如果附近有其他元素,且正常文档流中会使其重叠。给div创建BFC就能避免重叠
<span style = "float:left">浮动文案</span>
<div></div>
2.解决外边距塌陷问题
<div class= "div3"></div>
<div class= "div4" style="margin-top:10px;">
<p class="p1" style="margin-top:10px;"></p>
</div>
<hr/>
css
.div3{
width:100px;
height:100px;
border:1px dashed red;
}
.div4{
overflow:hidden;
}
.p1{
width:100px;
height:100px;
border:1px dashed black;
}
未设置:.div4{overflow:hidden;}
上述代码效果图,可与上图对比
3.宽度自适应的两栏布局问题
<div class = "div5" style="float:left;width:100px;height:100px;"></div>
<div class = "div6" style="overflow:hidden;height:100px;"></div>
css为了更好看到效果
.div5{
border:1px solid #C0F;
}
.div6{
border:1px solid #660;
}
如果不设置BFC结果div6将会占满整行,且左边区域会被div覆盖不能正常显示。