什么是浮动？
答：浮动就是让元素脱离文档流，并且按照一定的方式进行排列，遇到相邻浮动元素或者父元素的边界才停下来。由于子元素脱离文档流，结果会使父元素高度崩塌。
不过说到脱离文档流，但是为什么浮动元素里的文字位置却是正确的呢？这就是浮动的另一个特性，叫做提升半级层级，也就是说你影响了块状元素，但是不影响里边的属性内容。这就很懊恼了！浮动会影响我们所有的布局啊。所以我们就该说到清除浮动了。
清除浮动
- 给父元素加高度：父元素高度为0，那我们就给它一个高度。
（不推荐，高度有时是未知的，扩展性不好，如果改变了子元素的高度，父元素要重新给高度，在开发中可维护性不强。） - 让父元素也浮动起来：我们给父元素一个float：left
（非常不推荐，并没有解决布局问题，也就是说，父元素也一起脱离了文档流。其实也没什么卵用） - 让父元素变成内联块
（不推荐，这种方法非常有意思，既可以让子元素排成一行，又可以定义高度，一举两得。但是对于低版本的IE浏览器不能兼容，并且会出现缝隙。） - 父元素绝对定位
（我们可以给父元素进行绝对定位，也会给父元素高度，可是绝对定位本来就脱离文档流，所以只是了解，在布局中并不适用。） - 父元素overflow：hidden
（不推荐，hidden可以清除浮动但有可能隐藏有用的东西） - 加一个换行标签：在浮动元素后边加一个<br/>
（这个换行标签可以很好的解决这个问题，没有任何毛病，但不符合W3C标准，严格来说是不推荐使用的。） - 推荐：伪类清除浮动
ul:after{
content: "";
display: block;
clear: both;
}
ul li{
float: left;
width: 100px;
height: 100px;
background: red;
}
伪类的本质并没有添加元素，所以符合W3C的标准，而且是一种非常完美的清除浮动。
伪类：CSS 伪类用于向某些选择器添加特殊的效果。
