1. 父级添加overflow
.clearfix {
overflow: auto;//或者设置为hidden
zoom: 1;//支持IE6
}
#content,#sidebar {
float: left;
display: inline;//修正IE双外边距
}
<div id="container" class="clearfix">
<div id="content"></div>
<div id="sidebar"></div>
</div>
2. 添加空元素
.clear {
clear:both;
display:block;
height:0px;
width:0px;
overflow:hidden;
}
<div id="container" class="clearfix">
<div id="content"></div>
<div id="sidebar"></div>
<div class="clear"></div>
</div>
3. 父元素添加after伪类
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
</style>
<div id="container" class="clearfix">
<div id="content"></div>
<div id="sidebar"></div>
</div>
4.
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
<div id="container" class="clearfix">
<div id="content"></div>
<div id="sidebar"></div>
</div>
参考链接:
StackOverflow:Which method of ‘clearfix’ is best?:清除浮动黑科技完整解读