1. 添加标签clear:both
html:
<div class='wrap'> <div class='fl'></div> <div class='fr'></div> <div class='cl'></div> </div>
css:
.fl{ float:left; } .fr{ float:right; } .cl{ clear:both; }
2.父元素overflow:hidden
html:
<div class='wrap'> <div class='fl'></div> <div class='fr'></div> <div class='cl'></div> </div>
css:
.fl{
float:left;
}
.fr{
float:right;
}
.wrap{
overflow:hidden;
}
3.伪元素
html:
<div class='wrap clearfix'> <div class='fl'></div> <div class='fr'></div> </div>
css:
/*for modern browsers*/ .clearfix:before, .clearfix:after{ content:''; display:table; } .clearfix:after{ clear:both; } /*for ie6.7*/ .clearfix{ zoom:1; }