BFC概念
BFC全称：Block Formatting Context, 块级格式化上下文
BFC形成一个完全独立的容器，容器里的元素不管如何布局都不会影响容器外部
如何触发BFC
- 根元素（
<html>） - 浮动元素（
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、tr、tbody、thead、tfoot 的默认值）或inline-table） overflow值不为visible、clip的块元素display值为flow-root的元素contain值为layout、content或paint的元素- 弹性元素（
display值为flex或inline-flex元素的直接子元素），如果它们本身既不是 flex、grid 也不是 table 容器 - 网格元素（
display值为grid或inline-grid元素的直接子元素），如果它们本身既不是 flex、grid 也不是 table 容器 - 多列容器（
column-count或column-width(en-US) 值不为auto，包括column-count为1） column-span值为all的元素始终会创建一个新的 BFC，即使该元素没有包裹在一个多列容器中 (规范变更, Chrome bug)
BFC规则
- 包含内部浮动，浮动参与高度计算
- 排除外部浮动
- 阻止margin重叠
BFC应用
- 防止浮动导致父元素高度塌陷（等同父元素添加clearfix伪元素）
- 阻止margin重叠，阻止子元素margin-top,margin-bottom溢出(父元素有padding/border不会溢出)（clearfix无法阻止溢出）,从而阻止了子元素和外部元素的margin重叠
- 两栏布局-float元素会遮盖兄弟元素(其中的文本不会)，兄弟元素创建一个BFC即可阻止遮盖，形成两栏布局