什么是BFC？

BFC(块格式化上下文): 是Web页面可视化渲染CSS的一部分, 是布局过程中生成块级盒子的区域。也是浮动元素与其他元素的交互限定区域。

简单理解就是具备BFC特性的元素, 就像被一个容器所包裹, 容器内的元素在布局上不会影响外面的元素。
在解释什么是BFC之前，我们需要先知道Box、Formatting Context的概念。
Box：css布局的基本单位

Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：
block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；

inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；
run-in box: css3 中才有。
Formatting Context

Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

Formatting context的种类
Block fomatting context (BFC）：块级格式化上下文
Inline formatting context (IFC）：行内格式化上下文
Flex formatting context（FFC）：CSS3中的flex布局
Grid formatting context（GFC）：CSS3中的Grid布局
作者：李年糕子
链接：https://www.jianshu.com/p/8e13bab2bece
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

BFC常见应用

解决普通文档流块元素的外边距折叠问题

  1. <style>
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. }
  6. .demo div {
  7. width: 40px;
  8. height: 40px;
  9. }
  10. .demo1 {
  11. margin: 10px 0;
  12. background: pink;
  13. }
  14. .demo2 {
  15. margin: 20px 0;
  16. background: blue;
  17. }
  18. </style>
  19. <div class="demo">
  20. <div class="demo1"></div>
  21. <div class="demo2"></div>
  22. </div>

什么是BFC？ - 图1
可见两个块元素外边距为20px。
我们可以使用BFC来解决这个问题,只需要把两个元素置于不同的BFC中进行隔离。

  1. <style>
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. }
  6. .demo {
  7. overflow: hidden;
  8. }
  9. .demo div {
  10. width: 40px;
  11. height: 40px;
  12. }
  13. .demo1 {
  14. margin: 10px 0;
  15. background: pink;
  16. }
  17. .demo2 {
  18. margin: 20px 0;
  19. background: blue;
  20. }
  21. </style>
  22. ``
  23. <div class="demo">
  24. <div class="demo1"></div>
  25. </div>
  26. <div class="demo">
  27. <div class="demo2"></div>
  28. </div>

什么是BFC？ - 图2

自适应两栏布局

每个盒子的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

  1. <style>
  2. *{
  3. margin: 0;
  4. padding: 0;
  5. }
  6. body {
  7. width: 100%;
  8. position: relative;
  9. }
  10. ``
  11. .left {
  12. width: 100px;
  13. height: 150px;
  14. float: left;
  15. background: rgb(139, 214, 78);
  16. text-align: center;
  17. line-height: 150px;
  18. font-size: 20px;
  19. }
  20. ``
  21. .right {
  22. height: 300px;
  23. background: rgb(170, 54, 236);
  24. text-align: center;
  25. line-height: 300px;
  26. font-size: 40px;
  27. }
  28. </style>
  29. <body>
  30. <div class="left">LEFT</div>
  31. <div class="right">RIGHT</div>
  32. </body>

什么是BFC？ - 图3
又因为：
BFC的区域不会与float box重叠。
所以我们让right单独成为一个BFC

  1. <style>
  2. *{
  3. margin: 0;
  4. padding: 0;
  5. }
  6. body {
  7. width: 100%;
  8. position: relative;
  9. }
  10. ``
  11. .left {
  12. width: 100px;
  13. height: 150px;
  14. float: left;
  15. background: rgb(139, 214, 78);
  16. text-align: center;
  17. line-height: 150px;
  18. font-size: 20px;
  19. }
  20. ``
  21. .right {
  22. overflow: hidden;
  23. height: 300px;
  24. background: rgb(170, 54, 236);
  25. text-align: center;
  26. line-height: 300px;
  27. font-size: 40px;
  28. }
  29. </style>
  30. <body>
  31. <div class="left">LEFT</div>
  32. <div class="right">RIGHT</div>
  33. </body>

什么是BFC？ - 图4
right会自动的适应宽度，这时候就形成了一个两栏自适应的布局。

BFC清除浮动

  1. <style>
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. }
  6. .demo {
  7. border: 1px solid pink;
  8. }
  9. .demo p {
  10. float: left;
  11. width: 100px;
  12. height: 100px;
  13. background: blue;
  14. }
  15. </style>
  16. ``
  17. <div class="demo">
  18. <p></p>
  19. </div>

可见容器元素内子元素浮动,脱离文档流,容器元素高度只有2px
什么是BFC？ - 图5
解决方法

  1. .demo {
  2. border: 1px solid pink;
  3. overflow: hidden;
  4. }

什么是BFC？ - 图6

如何触发BFC

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

因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。