前端知识点总结-bfc前端的知识点很多很杂，每次都是到面试的时候才开始匆匆准备，实在收效甚微。每次别人问起来，回答结果总

前端的知识点很多很杂，每次都是到面试的时候才开始匆匆准备，实在收效甚微。每次别人问起来，回答结果总是不够令人满意，所以我决定花一段时间来整理一下前端的知识点，以备后期查阅也有助于知识点不断深入。

BFC，块级格式化上下文。是web页面可视化css渲染的一部分，是块盒子布局发生的区域，也是浮动元素与其他元素交互的区域。

BFC的特点

1，同一个BFC内的元素，垂直方向上的外边距会发生重叠。

如图所示：两个子元素都设置了margin：20px 0;但是显然，两个元素之间的margin值与元素与父级元素之间的margin值相同，这就是边距重叠。重叠的规则是：两者margin值同为正时，取较大值；同为负时，取绝对值的较大值；一正一负时求和。

2，浮动和清除浮动只能发生在同一个BFC元素内。浮动不会影响其他BFC中元素的布局，清除浮动只能清除同一BFC中在它前面的元素的浮动。

3，每个元素的margin box的左边，与包含块content-box的左边相接触（对于从左往右的格式化，否则相反），即使从在浮动也是如此。

如图所示：父元素设置了20px的padding值，两个子元素均与content-box左边相接触，即使第一个子元素设置了浮动也是如此。如果父元素没有设置padding，那么子元素就会与父元素的左border相接触。

4，BFC元素不会与float box重叠

如图所示，在BFC内，当黄色的块设置了float：left；时，根据第3条特性，黄色块和绿色的块会有一部分发生了重叠。

当给绿色的块设置overflow: hidden；将它转换成BFC时，两个模块相互之间不再发生重叠。

5，计算父级元素高度的时候，浮动元素也会参与计算。（解决元素浮动时，父级元素高度崩塌）

如图所示，当给子元素设置float：left；之后，父元素的高度变为0了。这就是常见的元素浮动使父元素高度崩塌问题。当给父元素设置overflow: hidden；时，父元素的高度就恢复正常了。

创建BFC

那么如何来创建一个BFC呢，MDN上面详细介绍了如下情况：

1，根元素<html>
2，浮动元素（float不为none）
3，绝对定位元素（display为fixed或absolute）
4，行内块元素（display: inline-block;）
5，表格单元格（display：table-cell; html表格单元格默认为该值）
6，表格标题（display: table-caption; html表格标题默认为该值）
7，overflow不为visible
8，匿名表格单元格元素（元素的display分别为table，table-row，table-row-group，table-header，table-header-group，table-footer-group（分别是html table, table-row, thead, tbody, tfoot的默认值）或者inline-table）
9，display为flow-root
10，contain值为layout，content或者paint的值
11，弹性元素（display为flex，inline-flex的元素的直接子元素）
12，网格元素（display为grid，inline-grid的元素的直接子元素）
13，多列元素（元素的column-count或者column-width不为0）
14，column-span的元素始终会创建一个BFC，即使该元素没有包裹在一个多列容器中（标准变更，chrome bug））