BFC（Block Formatting Contexts (块级格式化上下文)）

1. 什么是BFC？⭐⭐⭐⭐⭐

• BFC 是 Block Formatting Context 的缩写，即块级格式化上下文。
• BFC是CSS布局的一个概念，是一个独立的渲染区域，规定了内部box如何布局，具有BFC特性的元素可以看做是隔离了的独立容器，容器里面的子元素不会在布局上影响到外面的元素;
• 其中比较重要的布局规则有内部 box 垂直放置，计算 BFC 的高度的时候，浮动元素也参与计算。

2. BFC的特性/原理布局规则

• 内部的Box会在垂直方向，一个接一个地放置
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。
• 计算BFC高度时会算上浮动元素
• BFC是一个独立容器，容器里面的子元素不会影响到外面的元素
• BFC内部元素是垂直排列的
• BFC区域不会与float元素重叠
• 元素的类型和display属性，决定了这个Box的类型。不同类型的Box会参与不同的Formatting Context。

3. 如何创建BFC

• 只要元素满足下面任一条件即可触发BFC特性：
  • body 根元素
  • 浮动元素：float 除 none 以外的值
  • 绝对定位元素：position (absolute、fixed)
  • display 为 inline-block、table-cells、flex
  • overflow 除了 visible 以外的值 (hidden、auto、scroll)

5. BFC常见作用

• 阻止外边距折叠
  margin塌陷问题：在标准文档流中，块级标签之间竖直方向的margin会以大的为准，这就是margin的塌陷现象。可以用overflow：hidden产生bfc来解决。如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。
• 包含浮动元素
  高度塌陷问题，在通常情况下父元素的高度会被子元素撑开，而如果子元素为浮动元素父元素会发生高度坍塌，上下边界重合，这时就可以用BFC来清除浮动了。
• 阻止元素被浮动元素覆盖
  由于左侧块级元素发生了浮动，所以和右侧未发生浮动的块级元素不在同一层内，所以会发生div遮挡问题。可以给右侧元素添加 overflow: hidden，触发BFC来解决遮挡问题。
• 避免多列布局由于宽度计算四舍五入而自动换行

6. 常用的BFC清除浮动——clearfix

1. 加入一个空元素：content: ""
2. 可见度设为隐藏。仍然占据空间，只是看不到而已：visibility: hidden
3. 加入的这个元素转换为块级元素：display: block
4. 清除左右两边浮动：clear: both;

.clearfix:after {       /*在类名为“clearfix”的元素内最后面加入内容；*/ 
    content: "";       /*内容为“.”就是一个英文的句号而已。也可以不写。*/ 
    display: block;     /*加入的这个元素转换为块级元素。*/  
    clear: both;        /*清除左右两边浮动。*/  
    visibility: hidden; /*可见度设为隐藏。仍然占据空间，只是看不到而已*/ 
    height: 0;          /*高度为0； */    
    font-size:0;        /*字体大小为0;*/   
}