关于BFC

在我的另一篇关于清浮动的文章里知道，BFC是清浮动的主要技术。

BFC（Block formatting context 直译：块级格式化上下文）：

  BFC是一个独立的渲染区域，只有块级Box参与，规定了内部的块级Box如何布局，仍然属于文档的普通流，里面的子元素不会在布局上影响外面的元素，即是浮动元素与其他元素的交互限定区域。

  浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。

 布局规则（特性）：

①内部的块框会在垂直方向，依次放置；

②块框垂直方向的距离由margin决定。属于同一个BFC的两个相邻块框的margin会发生重叠。如果两个相邻块框不属于同一个块级格式化上下文，它们的外边距就不会叠加；

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

④BFC的区域不会与float box重叠。根据规定，一个块级格式化上下文的边框不能和它里面的元素的外边距重叠。这就意味着浏览器将会给块级格式化上下文创建隐式的外边距来阻止它和浮动元素的外边距叠加。由于这个原因，当给一个挨着浮动的块级格式化上下文添加负的外边距时将会不起作用；

⑤BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此；

⑥计算BFC的高度时，浮动元素也参与。

 BFC的创建（来自MDN）：

·根元素或包含根元素的元素

·浮动元素（元素的float不是none）

·绝对定位元素（元素的position为absolute或fixed）

·行内块元素（元素的display为inline-block）

·表格单元格（元素的display为table-cell，HTML表格单元格默认为该值）

·表格标题（元素的display为table-caption，HTML表格标题默认为该值）

·匿名表格单元格元素（元素的display为table、table-row、table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或inline-table）

·overflow值不为visible 的块元素

·display值为flow-root的元素

·contain值为layout、content或 strict 的元素

·弹性元素（display为flex或inline-flex元素的直接子元素）

·网格元素（display为grid或inline-grid元素的直接子元素）

·多列容器（元素的column-count或column-width不为auto，包括column-count为1）

·column-span为all的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中