这里介绍三种清除浮动的方法:
方法1:
我们html结构
<div class="A clearfix">
<div class="C floatLeft">
</div>
<div class="B floatLeft">
</div>
<div class="D floatLeft"></div>
</div>
css
.C{
height:100px;
width:100px;
background:#eee;
}
.floatLeft{
float:left;
}
.B{
height:50px;
width:70px;
background:#0fcd4e;
}
.D{
height:110px;
width:50px;
background:#f35ded;
}
.A{
background:#aaa;
border: 1px solid #111;
}
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
overflow:hidden;
}
.clearfix {
zoom:1; /* IE < 8 */
}
方法2:
<div class="A">
<div class="C floatLeft">
</div>
<div class="B floatLeft">
</div>
<div class="D floatLeft"></div>
<div class="clear"></div>
</div>
css
.C{
height:100px;
width:100px;
background:#eee;
}
.floatLeft{
float:left;
}
.B{
height:50px;
width:70px;
background:#0fcd4e;
}
.D{
height:110px;
width:50px;
background:#f35ded;
}
.A{
background:#aaa;
border: 1px solid #111;
}
.clear {
clear:both;/*主要使用这个属性来清除浮动*/
/*为了不让ie具有一定的空间,个人建议加上下面三个属性*/
height: 0;
line-height: 0;
font-size: 0;
}
方法3:
<div class="A">
<div class="C floatLeft">
</div>
<div class="B floatLeft">
</div>
<div class="D floatLeft"></div>
</div>
css
.C{
height:100px;
width:100px;
background:#eee;
}
.floatLeft{
float:left;
}
.B{
height:50px;
width:70px;
background:#0fcd4e;
}
.D{
height:110px;
width:50px;
background:#f35ded;
}
.A{
background:#aaa;
border: 1px solid #111;
overflow: auto;
}
* html .A {
zoom: 1; /* IE5-6 */
}