第一种方式：添加新元素，使用clear:both;
.clear{
clear: both;
}
clear: both;
}
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
<div class="div5 clear"></div>
</div>
<div class="div1"></div>
<div class="div2"></div>
<div class="div5 clear"></div>
</div>
第二种方式：父容器使用overflow: auto;
使用这种方法，必须定义width或者zoom,而且不能设置高度height，优点是代码少，缺点是不能使用position,否则超出的元素将会被隐藏
.container1{
border:solid 1px green;
overflow: auto;
zoom: 1;
}
第三种：父容器使用伪类:after跟zoom
这种方式是最推荐的，目前大多数大型网站都是使用这种方式清除浮动，浏览器兼容好，不会出现什么奇怪的问题。
zoom是IE专有属性，可解决ie6,ie7浮动问题，IE8以上和非IE浏览器才支持伪类:after。
缺点就是代码比较多，需要伪类:after跟zoom一起使用才能兼容所有主流浏览器。
但推荐使用，可将改样式定义为公共样式，减少代码量
.clearfix:after{
display: block;
visibility: hidden;
clear: both;
height: 0;
content: ".";
}
<div class="container clearfix">
<div class="div6"></div>
<div class="div7"></div>
</div>
