定义:Block format context 块级格局上下文
BFC 原理:
1.BFC 元素垂直方向上边距会产生重叠(哪个 px 大就抉择哪个)
2.BFC 区域不会与浮动元素产生重叠
3.BFC 是一个独立容器,容器外面的元素不会影响到里面的元素,里面的元素也不会影响他。
4. 计算 BFC 的高度时,浮动元素也参加计算。
创立 BFC:
float 属性不为 none
position 属性为 absolute 或 fixed
display 属性为 inline-block、table-cell、table-caption、flex、inline-flex
overflow 属性不为 visible
BFC 应用场景
1. 自适应两栏布局(浮动时,右浮动高于左浮动)
在浮动元素上加 overflow:hidden
2. 革除外部浮动(当子元素均浮动时,其无奈撑开父元素)
在父元素上加 overflow: hidden;
3、避免 marin 重叠
在其中一个元素上减少一个父元素,加属性:overflow: hidden;