对BFC的整理

一、BFC = block formatting context = 块级格式化上下文 = 在 CSS3 中 叫做 Flow Root

BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。

BFC 提供了一个环境，在这个环境中按照一定规则进行布局不会影响到其它环境中的布局

如果一个元素符合了成为BFC的条件，该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC)

二、 形成 BFC 的条件

1、浮动元素，float 除 none 以外的值；

2、绝对定位元素，position（absolute，fixed）；

3、display 为以下其中之一的值 inline-blocks，table-cells，table-captions；

4、overflow 除了 visible 以外的值（hidden，auto，scroll）

———————————————— 原文链接：浅析BFC及其作用_bfcwes-优快云博客

三、BFC常见作用

1、包含浮动元素 问题案例：高度塌陷问题：在通常情况下父元素的高度会被子元素撑开，而在这里因为其子元素为浮动元素所以父元素发生了高度坍塌，上下边界重合。这时就可以用BFC来清除浮动了。

2、不被浮动元素覆盖 问题案例： div浮动兄弟遮盖问题：由于左侧块级元素发生了浮动，所以和右侧未发生浮动的块级元素不在同一层内，所以会发生div遮挡问题。可以给蓝色块加 overflow: hidden，触发BFC来解决遮挡问题。

3、 BFC 会阻止外边距折叠 问题案例：margin塌陷问题：在标准文档流中，块级标签之间竖直方向的margin会以大的为准，这就是margin的塌陷现象。可以用overflow: hidden，产生BFC来解决。

四、在布局中BFC的应用场景

（1）清除盒子垂直方向上外边距合并——盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子垂直方向的margin会发生重叠。 解决方法： 根据属于同一个BFC的两个相邻盒子垂直方向的margin会发生重叠的性质，可以给其中一个盒子再包裹一个盒子父元素，并触发其BFC功能（例如添加overflow: hidden;）这样垂直方向的两个盒子就不在同一个BFC中了，因此也不会发生垂直外边距合并的问题了。

（2）在子元素设置成浮动元素的时候，会产生父元素高度塌陷的问题。 解决方法： 给父元素设置overflow: hidden；的时候会产生BFC 由于在计算BFC高度时，自然也会检测浮动的子盒子高度。所以当子盒子有高度但是浮动的时候，通过激发父盒子的BFC功能，会产生清除浮动的效果。 ———————————————— 原文链接：BFC是什么-优快云博客