1.什么是BFC?
是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器,创建了BFC的元素就是一个独立的盒子，不过只有Block-level box可以参与创建BFC，它规定了内部的Block-level Box 如何布局，并且这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素
2.创建BFC
1.浮动元素：float除none以外的值
2.定位元素：position: absolute或fixed
3.display: inline-block|flex|inline-flex|table-cell或table-caption
4.overflow 除了 visible 以外的值hidden，auto，scroll
3.应用场景
- 解决margin叠加的问题
- 用于布局（overflow: hidden）,BFC不会与浮动盒子叠加。
- 用于清除浮动，计算BFC高度。
4.使用BFC
1.解决margin叠加的问题
<div class="box1"></div>
<div class="box2"></div>
//css
.box1, .box2 {
width: 100px;
height: 100px;
background-color: rgb(157, 49, 49);
}
.box1 {
margin-bottom: 100px;
}
.box2 {
margin-top: 200px;
}
image.png
按道理应为300px,可是它不讲道理，以margin较大的为准，margin重叠了
我们给他讲讲道理
<div class="box">
<div class="box2"></div>
</div>
让box2处于一个bfc中
.box {
overflow: hidden; //触发bfc
}
image.png
2.清除浮动
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
box1,2,3全都左浮，box没有设置高度，看看实际情况
image.png
box没有被撑开，因为浮动元素脱离文档流，不占据空间
我们让box成为一个bfc
.box {
width: 300px;
border: 5px solid #000;
overflow: hidden; /* 触发bfc */
}
image.png
box被撑开了，有了高度
3.bfc防止文字环绕
<div class="box">
<div class="img"></div>
<p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>
</div>
image.png
如果不想让文字环绕，可以使用bfc
p {
background-color: rgb(70, 119, 73);
color: #fff;
overflow: hidden; /* 触发bfc*/
}
image.png
