1、如何理解CSS盒模型？ #

2、如何理解 BFC ？ #

2.1、何为 BFC #

BFC：块级格式化上下文。

一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素

2.2、如何产生 BFC #

• 根元素： html 标签
• 浮动元素：float 值为 left 或 right
• overflow值不为 visible: 为 auto、scroll、hidden
• display 值为
  • inline-block
  • table
  • table-cell
  • inline-table
  • flex
  • inline-flex
  • grid
  • inline-grid
• 绝对定位元素，position 值为 fixed 或 absolute

2.3、BFC 的规则 #

• 内部的 box 将独占宽度，且垂直方向上一个接一个排列
• 同一个 BFC 的两个相邻 box 的 margin 会出现 margin 边距折叠现象
• 每个 box 在水平方向上的左边缘与 BFC 的左边缘相对齐，即使存在浮动也是如此
• BFC 区域不会与浮动元素重叠，而是会依次排列
• BFC 区域是一个独立的渲染容器，容器内的元素和 BFC 区域外的元素之间不会有任何干扰
• 浮动元素的高度也会参与BFC 的高度计算

BFC 的关键点：边距折叠、清除浮动、自适应多栏布局

2.4、清除浮动 .clearfix 类的实现 #

.clearfix:after{
  content: '';
  display: table;
  clear: both;
}

.clearfix{
  *zoom: 1; /*兼容 IE*/
}