面试之清除浮动
为什么要清除浮动？
当父盒子没设置高度，子盒子浮动了，就会导致父盒子高度坍塌，从而影响后面的布局。
例如我们在平时布局中常常出现需要水平方向左右布局的情况：
想要实现这种效果，我们可以给左右两边的小盒子分别添加左浮动和右浮动。然而设置左右盒子的浮动会导致未设置高度的父盒子变成如下所示：
由图可知，子元素在设置浮动导致脱离标准流后，父元素因为没有内容撑开而产生高度坍塌，这种情况我们就可以通过清除浮动来解决。
清除浮动的方法
1.额外标签法（隔墙法）
优点：书写方便，通俗易懂。
缺点：添加了无意义的标签，影响页面结构。
注意点：额外添加的标签必须是块级元素。
代码如下：
效果如下：
2.给父盒子设置固定高度
优点：简单粗暴。
缺点：有时候项目需求导致无法固定父盒子高度。
代码如下：
效果如下：
3.给父盒子添加浮动
该方法缺点明显，会导致爷爷级元素产生影响。
代码如下：
效果如下：
4.给父盒子添加overflow:hidden
缺点:有时候会隐藏盒子溢出的内容。
代码如下：
效果如下：
5.单伪元素清除法
优点：项目中使用，直接给标签添加类名就可以清除浮动了，不会增加额外的结构。
代码如下：
需要清除浮动的盒子再直接添加clearfix的类名就可以了。
效果如下：
6.双伪元素清除法
优点：项目中使用，直接给标签添加类名即可清除浮动。
代码如下：
效果如下：
8.BFC
BFC,全称Block Formatting Context(块级格式化上下文)。个人理解就是触发BFC的盒子里面的内容不会被外面内容影响，外面内容也不会影响盒子内的内容。BFC的规则是：
1.内部的盒子会实现水平布局，从左到右排列。
2.属于同一个BFC的相邻的子元素会发生外边距折叠，而不同BFC不会发生折叠。
3.BFC的区域不会和浮动元素区域重叠（例如自适应两栏布局）
4.计算BFC高度时，浮动子元素也参与计算。（BFC可以没有高度的父盒子子元素脱标后高度坍塌的现象）
