<div style="width: 160px; border: 1px solid #333; padding: 10px;">
<div style="width: 120px; height: 140px; background: #eee; float: left; "></div>
<div style=" clear: both; height: 0; font-size: 1px;"></div>
</div>
2. 在父级设置:overflow: hidden;
<div style="width: 160px; border: 1px solid #333; padding: 10px; overflow: hidden;">
<div style="width: 120px; height: 140px; background: #eee; float: left;"></div>
</div>
3. 在父级设置:float
<div style="width: 160px; border: 1px solid #333; padding: 10px; float: left;">
<div style="width: 120px; height: 140px; background: #eee; float: left;"></div>
</div>
4. 给父级加上这行吧:
.clear:after { content: '\20'; clear: both; display: block; }
<style>
.clear:after { content: '\20'; clear: both; display: block; }
</style>
<div style="width: 160px; border: 1px solid #333; padding: 10px;" class="clear">
<div style="width: 120px; height: 140px; background: #eee; float: left;"></div>
</div>
5. 给浮动层下设置:<br clear="all" />
<div style="width: 160px; border: 1px solid #333; padding: 10px;">
<div style="width: 120px; height: 140px; background: #eee; float: left;"></div>
<br clear="all" />
</div>
常用清楚浮动方法
.clearfix:after {
content: ".";
display: block;
clear: both;
overflow:hiddden;
visibility: hidden;
height: 0;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
}