CSS常见问题

1. BFC

定义：块格式化上下文。
布局规则

• BFC内，盒子依次垂直排列；垂直距离由margin属性决定（margin塌陷）；
  BFC内，每个盒子的左外边缘接触内部盒子的坐外边缘，即使浮动情况下；
  BFC区域不会与float box发生重叠；
  BFC就是页面上一个隔离的独立容器，容器内的子元素不会影响到外面的元素；
  计算BFC高度时，浮动元素也会参与计算；

创建BFC
- 根元素
- 浮动元素
- position：absolute
- overflow不为hidden
- display：inline-block 等；

BFC应用
- 防止margin重叠
- 清除内部浮动
- 自适应多栏布局

2. 清除浮动

• clear:both;
• clear + 伪元素

.outer:after{
    content: '';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}

• 利用BFC规则

水平垂直居中

• flex
• margin：auto
• absolute + transform
• text-align + line-height