1、給浮動的元素的祖先元素加高度
div{
height: 50px;
border: 1px solid #000;
}
<body>
<div> //設置高度
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設計模式</li>
</ul>
</div>
<div> //設置高度
<ul>
<li>學習方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
2、clear: both;
.box2{
clear: both;
}
<body>
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設計模式</li>
</ul>
</div>
<div class="box2"> //clear:both
<ul>
<li>學習方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
問題:margin失效了,兩個div之間沒有任何間隙。3、隔牆法
.cl{
clear: both;
}
.h8{
height: 8px;
_font-size:0;
}
<body>
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設計模式</li>
</ul>
</div>
<div class="cl h8"></div> //隔牆法,第一個div沒有高度
<div class="box2">
<ul>
<li>學習方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
4、內牆法
<body>
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設計模式</li>
</ul>
<div class="cl h16"></div> //內牆法
</div>
<div class="box2">
<ul>
<li>學習方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
div被撐出高度了;5、overflow: hidden;
.box1{
overflow: hidden;
_zoom:1;
margin-bottom: 10px;
}
<body>
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設計模式</li>
</ul>
</div>
<div class="box2">
<ul>
<li>學習方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
用途:<div> <p class="p1"></p> <p class="p2"></p> <p class="p3"></p> </div>
div{ width: 400px; overflow: hidden; border: 10px solid black; }
一個父親不能被自己浮動的兒子,撐出高度。但是,只要給父親加上overflow:hidden; 那麼,父親就能被兒子撐出高了。這是一個偏方。
6、推薦使用
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; /*IE6 7*/
}