清除浮动

先回顾下一个老生常谈的题目，清除浮动

由于浮动属性会带来元素半脱离文档流状态（文字不脱离，毕竟浮动设计之初是为了文字的环绕服务的)，故造成父盒子的塌陷，这就引申出需要清除浮动的概念。

方法如下：

1.给父盒子加一个空 div，给其设置clear：both；

不推荐，语义化差

2.加一个内容为空的伪类，给其设置clear：both；

推荐

3.利用 BFC 特性，给父盒子设置 overflow:hidden 或者overflow:auto 等

不推荐，简单粗暴，会是盒子里面原本要超出的部分被裁剪掉

BFC

为什么 BFC 可以让塌陷的父盒子不受浮动影响呢？

先搞清 BFC 是啥?

Block Fomartting Context , 块级格式化上下文 , BFC 是规定内部块级元素的一个环境，一个规则。内部独立渲染不影响外部，反之亦然。

他由三个概念组成：

Block

约束的对象为内部的块级元素

Fomartting （格式 规则）

• 一个块级元素独占一行，自上而下排列
• 垂直距离 margin 决定，垂直 margin 会重叠
• 盒子总是从左侧排列

Context（上下文 环境）

• 容器和内部元素共同构成的环境
• 子项平等 相互影响
• 子项可以产生新的上下文，套娃

未完 ~ ~