1.什么是BFC
bfc 从字面意思来讲就是block formatting context (块级格式化上下文),bfc 其实是页面中一个单独渲染区域,并且有自己的渲染规则,bfc 区域里的元素无论如何布局 都不会影响外层的元素排列
2.如何触发BFC
首先肯定不是所有的元素模式都会产生BFC,可以产生BFC的情况有:
1.display 为block,list-item table,inline-block, table-cell,flex inline-flex都会产生BFC (为inline 时触发 IFC);
2.float 属性不为none;
3.position 为absolute或者为fixed;
4.overflow 不为visible
3.BFC 元素所具有的特性
1. 在bfc 中盒子从顶端垂直排列 ;
2. 盒子垂直方向的距离 由ma rgin 决定,在同属于一个bfc 时的margin 会发生重叠;
3. 在bfc 中盒子的margin-left 会以 父类盒子的border-left 为起点
4.bfc 的区域 不会与浮动盒子产生交集,而是紧贴浮动边缘
5. 计算bfc 区域高度时,也会检测浮动盒子的高度
4.BFC 的主要作用
1.清除浮动(只要把父元素设置为 bfc 就可以清除子元素的浮动了,一般的用法是给父元素设置overflow:hidden 样式,对于es6 加上zoom :1 就可以了)
.father{
width: 500px;
border: 1px solid #000;
}
.son1,.son2{
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
.son2{
background-color: deeppink;
}
<div class="father">
<div class="son1">
</div>
<div class="son2">
</div>
</div>
正常来讲在没有给子元素设置浮动的时候 两个子盒子是会垂直排列的,而且会把父元素盒子的高度撑开,因为子元素添加了float 所以导致变成了图上所示,那么通常如何解决这种问题呢,那就是给父元素创造一个bfc 区域,比如在
.father{
width: 500px;
border: 1px solid #000;
float: left;/**overflow:auto*/
}
这样就会解决浮动问题
2.解决外边距合并问题
因为在同一个bfc 区域两个相邻的盒子会产生 margin 重叠,所以需要在一个盒子外再套上一个盒子,并且给新建的盒子添加bfc 效果