清除浮动的方式

1 最简单的清除浮动方法，clear：left/right/both

.div1 {
/* background: #000080; */
border: 1px solid red
}

.div2 {
background: #800080;
border: 1px solid red;
height: 100px;
width: 100%;
margin-right: 0;
}

.left {
float: left;
width: 20%;
height: 200px;
background: #DDD
}

.right {
float: right;
width: 30%;
height: 80px;
background: #DDD
}
/*清除浮动代码*/
.clearfloat {
clear: both
}
<div class="div1">
<div class="left">left</div>
<div class="right">Right</div>
<!-- <div class="clearfloat"></div> -->
<div class="div2">content</div>
</div>

在div2前面添加新的标签可以清除div2左（右）的浮动，从而避免重叠。

如果是因为浮动使得父级元素没有被撑开，只要在父级元素结束之前添加即可。

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度

优点：简单、代码少、浏览器支持好、不容易出现怪问题

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好

2 采用伪元素以及zoom（兼容IE）来实现清除浮动

/*清除浮动代码*/
.clearfloat:after{
display: block;
clear: both;
content: '';
visibility: hidden;
height: 0;
}
.clearfloat{zoom:1}

直接在需要清除浮动的标签内添加 类clearfloat即可。

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题

优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。

3 给父级div添加样式 overflow：hidden,如果外部盒子没有宽度或者高度，里面又是浮动元素，就会被撑开

4 给父级元素添加高度