float脱离文档流，清除浮动

<style type="text/css">
        .main{width: 400px;  margin: 0 auto; background-color: blue;}
        .left,.right {float: left;  width: 180px; height: 500px;}
        .left{background-color: green;}
        .right {background-color: silver;}
</style>

<div class="main">
    <div class="left">左列</div>
    <div class="right">右列</div>
</div>

1、为浮动元素的父元素设置高度；

.main{height: 500px;}

缺点：在浮动元素高度不确定的时候不适用
2、结尾处加空标签

（1）div标签 clear:both；

.clear{clear: both;}

<div class="main">
    <div class="left">左列</div>
    <div class="right">右列</div>
    <div class="clear"></div>
</div>

（2）br标签clear:both；

br{clear: both;}

<div class="main clear-float">
    <div class="left">左列</div>
    <div class="right">右列</div>
    <br />
</div>

3、父级div定义 overflow:hidden；

.main{overflow: hidden;}

4、主流方法：父级div定义 伪类:after 和 zoom 

<style type="text/css">
        .main{width: 400px;  margin: 0 auto; background-color: blue;}
        .left,.right {float: left;  width: 180px; height: 500px;}
        .left{background-color: green;}
        .right {background-color: silver;}
        .clear-float:after{display: block; clear: both; content: ""; visibility: hidden;height: 0; overflow: hidden;}
        .clear-float{zoom: 1;}
</style>

<div class="main clear-float">
    <div class="left">左列</div>
    <div class="right">右列</div>
</div>

5、父级div一起浮动；

（1）定义 overflow:auto；

.main{overflow: auto;}

（2）设置float

.main{float: left;}

6、父级div定义 display:table 

.main{display: table;}