float（对块级，行内，内联块元素的影响），如何清除浮动

浮动的影响

浮动会使块级元素和内联元素具有内联块元素的特点，块元素可以一行显示，内联元素可以设置宽高。

使得元素脱离文档流，按照浮动的方向移动，遇到父级边界或者相邻浮动元素停住：float：left / right / none，子元素脱离文档流，结果会使父元素高度崩塌

清除浮动

1.为父元素设置高度

     优点：兼容性好

     缺点：高度未知，可能会导致子元素换行

2.overflow：hidden / scroll / auto

     优点：所有浏览器都兼容

     缺点：hidden可能会隐藏掉有用的东西，auto和scroll则会显示滚动条

3.在浮动元素最后设置空标签 "clear:both"

    优点：所有浏览器都兼容

    缺点：会增加无意义的空标签

4.设置CSS伪类

.clearfix:after{

display: table;

content: "";

clear: both;

}

.clearfix{

*zoom: 1; //兼容IE

}

   优点：所有浏览器都兼容

   缺点：除了最后一条要兼容低版本的IE，基本没有缺点