BFC是块级格式化上下文的意思。它规定内部块级元素格式的一个独立环境。
通俗一点来讲,可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部。
触发条件
当元素属性为float、positon:absolute、display:inline-block、overflow 非visible(默认值)、flex 盒子、grid 盒子等属性时,会创建格式上下文。
应用
1.父盒子塌陷问题
我们经常遇到一种情况,父盒子下如果子盒子浮动了,那么父盒子就没有高度了,这是因为没有触发 BFC,我们可以
给父盒子清除浮动,或者写一句overflow hidden创建一个父盒子的 BFC,它就会把浮动元素包住解决高度问题
<div class="father">
<div class="box"></div>
</div>
.father{
border:1px solid black;
}
.box{
height:50px;
width:50px;
border:1px solid red;
float:left;
}
父盒子添加overflow:hidden 或者其他变成 BFC 的样式后
2.外边距合并问题
两个上下的盒子分别写margin-top和 margin-bottom 时,会出现外边距合并,这时候给一个盒子用 BFC包起来,就不会出现外边距重叠。
BFC 前
.box1{
border:1px solid black;
height:50px;
width:50px;
margin-bottom:50px;
}
.box{
height:50px;
width:50px;
border:1px solid red;
margin-top:50px;
}
<div class="box1"></div>
<div class="box"></div>
然后给其中一个盒子套上一个 BFC 盒子
<div class="box1"></div>
<div class="bfcBox">
<div class="box"></div>
</div>
.bfcBox{
display:flex;//变成 bfc
}
就可以发现外边距合并的问题解决了
3.避免被浮动元素覆盖
BFC 可以阻止元素被浮动元素覆盖,比如两个上下的的盒子分别是盒子1和2,1浮动了,那么盒子2会往上走,并且被盒子1压住。
.box1{
height:50px;
width:50px;
background-color:black;
}
.box2{
height:100px;
width:100px;
background-color:red;
}
<div class="box1"></div>
<div class="box2"></div>
压住前 现在我给黑盒子设置 float:left 后 可以看到红盒子往上走并且被压住了
这时候如果给红盒子设置overflow: hidden使其变成 BFC,那么红盒子就会往旁边跑避免被压住。
4.父子盒子 margin 折叠问题
现在我要给设置一个父盒子一个子盒子。
我是文字
<div class="father">
<div class="child"></div>
</div>
.father {
height: 100px;
width: 100px;
background-color: black;
}
.child {
height: 50px;
width: 50px;
background-color: red;
overflow: hidden;
}
现在我希望子盒子往下面一点,于是设置 margin-top:20px
结果发现把父盒子带跑了。
我可以给父盒子设置一个 border 来避免父盒子也被带偏。
border:1px solid transparent;
BFC解法:给父盒子设置属性使得其变成 BFC
overflow:hidden;
两种方式的结果都是一样的。