为什么要清除浮动？

当我们使用浮动进行页面布局或文本图片混排的时候，元素浮动的框可以左右移动，直到这个框的外边缘遇见包含的框或者另外一个浮动框的边缘。浮动块不属于文档中的普通流，当一个元素浮动的时候，不会影响到块级框的布局只会影响到内联框的排列。文档中的普通流就会表现得和浮动框不存在一样。有时候我们的浮动框高度很高，旁边的正常流的框也不会拉高高度来包含住浮动框。有时候我们的浮动框很低，旁边的正常流的框就会将其包围住。这就是高度塌陷。清除浮动，主要就是用来处理高度塌陷带来的问题。清除浮动:对应的方法是clear，对应CSS中的属性是clear： both | left | right | none。

对于清除浮动的方法，主要有以下几种常用的，不常用的就不写了，根据实际的情况来用。

1、使用<br>标签。

这个方法很简单，在浮动元素最后放一个<br clear=“all">标签。浏览器默认会为标签生成一个行内框来清除浮动的影响。但是这种方法一般不要用，因为给页面添加了不必要的结构。

2、给浮动的父级元素设置高度。

我们知道了高度塌陷是应为给浮动元素的父级高度是自适应导致的，那么我们给它的设置适当的高度就可以解决这个问题了。但是这个方法由于父级元素的高度不好确认，在这种情况下不适用。

3、overflow：hidden

在浮动元素下方添加空div,并给该元素写css样式： {clear:both;height:0;overflow:hidden;}

4、给父级元素添加overflow:hidden清除浮动

overflow: hidden;
*zoom: 1;

5、万能清除法 after伪类清浮动（现在主流方法，推荐使用，我看了下淘宝、腾讯的网站大多都用的这个）

.div-float:after {
    content:"";
    clear: both;
    display: block;
    height: 0;
    over-flow: hidden;
    visibility: hidden;
}

//倘若要兼容IE6，7，需要配合Zoom使用
.clear:after {
    content:'';
    display:block;
    clear:both;
    height:0;
    overflow:hidden;
    visibility:hidden;
}
.clear {
    zoom: 1;
}

清除浮动