CSS之BFC

1. BFC特性

区块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

个人理解：在一个BFC区域里，不管内部元素怎么倒腾，始终不影响该区域外部元素。

2. 如何创建BFC

参阅MDN文档说明： 区块格式化上下文

3. 为何创建BFC

格式化上下文影响布局，通常，我们会为定位和清除浮动创建新的 BFC，而不是更改布局，因为创建新BFC可以做到以下几点：

• 包含内部浮动。
• 排除外部浮动。

• 阻止外边距重叠。

  2.1 包含内部浮动

  特性H BFC 使得让浮动内容和周围的内容等高。

  父级设为BFC，最终效果是父级高度跟随内部浮动or其他内容等高，即父级自适应高度

  个人理解：

  1. 假如在一个div容器W里有两个块元素A、B，设A为float:left，B默认布局。此时如果A的高度超过了W，就可以看到A的渲染区域超出了W的渲染区域，这时候布局就难了，因为A影响到了div容器外部元素的布局。
  2. 根据上述特性H，只要将W创建为BFC，则A和它周围的内容(此处为B)等高，也就是说不管是A更高还是B更高，它们都会以最高的那个为准一样高。
  3. 根据这个特性，可以做左上角图片，右下文字包围的效果。

  2.2 排除外部浮动

  特性F 正常文档流中建立的 BFC 不得与元素本身所在的块格式化上下文中的任何浮动的外边距重叠。

  个人理解：

  1. 假如在一个div容器W里有两个块元素A、B，设A为float:left，B默认布局。此时A因为脱离了文档流，所以它是覆盖在B上面的，B占100%宽度。如果我们不想B被覆盖呢？
  2. 根据上述特性F，只要将B创建为BFC，则B不可以与A的外边距重叠，如此一来B就会占据除A占据宽度之外的其他空间了。
  3. 根据这个特性，可以做两列布局，左侧固定宽度，右侧宽度自适应的效果。

  2.3 防止外边距重叠

  特性M 创建新的BFC可以避免两个相邻的元素外边距重叠

  个人理解：

  1. 假如在一个div容器W里有两个块元素A、B，A、B分别设置了margin: 10px 0，此时希望看到的是A、B垂直相间10 + 10 = 20px，但是实际上A、B之间是10px的间隔。这就是我们常说的margin坍塌，外边距重叠。
  2. 根据上述特性M，只要将A或者B其中之一包裹在一个div容器I里，然后将I创建为BFC，如此一来，A、B垂直相间将为20px

  3. 根据这个特性，可以解决margin坍塌/外边距重叠问题

     ##### 2.3.1 为什么加了BFC外边距就不重叠？

     个人理解：

     1. 首先还是因为BFC区域内部元素不会影响外部元素的定位、布局。
     2. 在创建BFC之前，AB的margin是相互以对方为定位标准的，创建了BFC区域之后，AB的margin值都以BFC区域的边为标准了。

4. 多列布局实现方案

方案1：2.2所述，使用特性F

方案2：使用flex布局，左侧定宽，右侧自适应

5. 推荐阅读

• MDN CSS：层叠样式表
• MDN CSS：区块格式化上下文