面试篇：BFC是什么？

前言

该篇内容用于记录大三寻找实习阶段遇到的问题

一、BFC是什么

1.BFC：是w3c中的一个概念，其全称为Block Formatting Context（块级格式化上下文）

2.BFC：是指浏览器中创建了一个独立的渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。

二、BFC特点

（1）我们可以把BFC看作为页面的一块渲染区域，他有着自己的渲染规则

（2）简单来说BFC可以看作元素的一种属性，当元素拥有了BFC属性后这个元素就可以看

（3）作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素。

（4）给父元素触发bfc，可清除浮动

三、BFC布局

（1）bfc内部的盒子会在垂直方向，一个接着一个摆放。

（2）bfc区域不会与float元素重叠，而是紧贴浮动元素。

（3）属于同一个bfc区域的两个盒子的margin会发生重叠。

四、如何触发BFC

（1）float属性的值不为none

（2）position的值为absolute或者fixed

（3）display值为inline-block、table-cell、flex等

（4）overflow值不为visible

五、利用BFC可解决的常见问题

（1）外边距重叠

产生外边距重叠的原因是：属于同一个BFC的两个相邻盒子垂直方向的margin会发生重叠。

解决原理：

因为该现象是因为同一个BFC中的两个相邻盒子垂直方向会发生重叠，所以我们可以给其中一个盒子触发其BFC，让该盒子独自形成一个BFC，这样这两个相邻盒子就不属于同一个BFC，自然就解决外边距重叠了。

（2）子元素设置成浮动元素后，会产生高度塌陷的现象

产生原因：其父元素属于正常流，若没有设置高度，则其高度由内容撑开，而当子元素设置成浮动后，其会脱离文档流，固而此时无法撑开父元素，所以会发生高度塌陷。

解决办法：

利用BFC的特性：计算BFC高度时，也会检测浮动元素的高度，所以当子元素设置为浮动后，触发其父元素的BFC后，会由清除浮动的效果。