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;}

Q.E.D.


学而不厌 不耻下问