-
使用带clear属性的空元素
<h2>给浮动元素后面的元素添加clear属性</h2>
<div class="box">
<p class="textFloat">text</p>
<div class="clear"></div>
</div>
.box{
border: 1px solid red;
background-color: gray;
}
.textFloat{
float: left;
}
.clear{
clear: both;
}
- 优点:简单,代码少,浏览器兼容性好。
- 缺点:需要添加大量无语义的html元素,代码不够优雅,后期不容易维护。
-
使用CSS的overflow属性
<h2>使用CSS的overflow属性</h2>
<div class="box">
<p class="textFloat">text</p>
</div>
.box {
border: 1px solid red;
background-color: gray;
overflow: hidden;
*zoom: 1;
}
.textFloat{
float: left;
}
-
使用CSS的:after伪元素
<h2>使用CSS的:after伪元素</h2>
<div class="box clearfix">
<p class="textFloat">text</p>
</div>
.box {
border: 1px solid red;
background-color: gray;
}
.textFloat {
float: left;
}
.clearfix:after{
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
zoom: 1;
}