使用伪元素
<style>
.box {
background-color: gray;
border: solid 1px black;
}
.box .img {
float: left;
width: 100px;
height: 100px;
}
.clearfix {
*zoom: 1;
}
.clearfix:after {
content: "020";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style>
<div class="box clearfix">
<div class="img"></div>
</div>
使用尾部添加元素
<style>
.box {
background-color: gray;
border: solid 1px black;
}
.box .img {
float: left;
width: 100px;
height: 100px;
}
.clear {
clear: both;
}
</style>
<div class="box clearfix">
<div class="img"></div>
<div class="clear"></div>
</div>
生成 BFC 布局
<style>
.box {
background-color: gray;
border: solid 1px black;
overflow: hidden;
}
.box .img {
float: left;
width: 100px;
height: 100px;
}
</style>
<div class="box">
<div class="img"></div>
</div>