BFC

什么是BFC

块格式化上下文(Block Formatting Context，BFC)是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

你可以把它理解成一个独立的区域

BFC的作用

BFC形成一个完全独立的空间,让空间的子元素不会影响到外面的布局

BFC 的原理/BFC的布局规则

BFC 的原理，其实也就是 BFC 的渲染规则。包括：

1. BFC 内部的子元素，在垂直方向，边距会发生重叠。
2. BFC在页面中是独立的容器，外面的元素不会影响里面的元素，反之亦然。
3. BFC区域不与旁边的float box区域重叠。（可以用来清除浮动带来的影响）。
4. 计算BFC的高度时，浮动的子元素也参与计算。

常用触发条件

• float不为none
• position不为relative，static
• overflow为auto scroll，hidden
• display为table-cell，inline-block，flex

BFC 的应用

1.浮动元素的父元素高度塌陷

问题

子元素全是float元素且父元素没有设置高度. 浮动的子元素脱离文档流,父元素检测不到子元素的存在无法被撑开,导致父元素高度塌陷,后面布局出现混乱

解决方案

清除浮动

2.两栏自适应布局

问题

在通过浮动实现两栏自适应布局时(左边宽度固定,右边自适应),当右侧文字高度超出左侧高度时,会出现右侧文字出现在左侧的问题

解决方案

右侧的元素创建BFC，将right区域添加overflow属性

3.外边距垂直方向重合

问题

当两个块级元素分别设置margin-bottom:20px,margin-top:25px=>此时实际两个块级边框距离为最大值(25px)

解决方案

1.其中一个p元素外面包裹一层父元素，触发父元素BFC比如 overflow: hidden

2.用padding代替margin

参考文章：https://github.com/poetries/FE-Interview-Questions