什么是BFC?
- BFC 就是块级格式化上下文
- 相当于一个独立的区域,里面的元素和外部元素互相影响
BFC的特性
- 内部的盒子会按照垂直的方向一个个排列
- 同一个BFC下的相邻两个块级元素会发生外边距重叠,创建一个新的BFC包含其中一个元素可以避免(解决外边距重叠)
.a{
width: 100px;
height: 100px;
background: red;
margin-bottom: 20px;
}
.b{
margin-top: 20px;
width: 100px;
height: 100px;
background: red;
}
//此时的a和b处于body下的同一个BFC 此时外边距重叠,解决方法就是给a盒子外加一个父盒子使其产生BFC 让a和b两个盒子不在同一个BFC下
<div class="a"></div>
<div class="b"></div>
- 设置勒BFC的区域不会和浮动元素重叠(解决浮动元素覆盖的问题)
- BFC下的盒子会计算浮动元素盒子的高度(解决高度塌陷的问题)
一般情况下 父盒子没有设置高度 ,父盒子的高度就会被子盒子撑开, 如果子盒子设置浮动则父盒子的高度塌陷 为0 此时只要把父盒子设置为BFC就可以解决
如何触发BFC
- 设置float浮动
- overflow的值hidden,aut或者scroll,而不是visible
- position的值为absolute喝着fixed
- display设置table | inline-block |flex |gird