清除浮动

首先呢，要明确为什么要清除浮动？

当父元素不写高度时，子元素写了浮动之后，父元素会发生高度塌陷。

清除浮动的方法

方法有很多种，不过呢，也都是各有优缺点。

1.父级元素设置高度

优点：代码少，简洁

缺点：高度写死，所以只适合高度限定的页面布局

2.添加空div , 在浮动元素下方添加空div,并给该元素写css样式clear:both

优点：代码少，简单，浏览器支持好

缺点：如果页面浮动较多，那么需要添加很多空div

3.给父级元素添加overflow:hidden

优点：代码少，简单，浏览器支持好

缺点：不能与position定位配合使用

4.浮动元素的父级元素定义after伪类（代码如下）

优点：浏览器支持好

缺点：代码较多