现代Clearfix解决方案
Container with overflow: auto;
<div style="overflow: auto;">
<img
style="float: right;"
src="path/to/floated-element.png"
width="500"
height="500"
>
<p>Your content here…</p>
</div>
Clearfix Reloaded
大多数现代浏览器都使用这个
.container::after {
content: "";
display: block;
clear: both;
}
旧的Clearfix解决方法
"Beat That ClearFix", a clearfix for modern browsers
不支持IE6/7
.container::after {
content: "";
display: table;
clear: both;
}
Micro Clearfix
支持Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+
.container::before, .container::after {
content: "";
display: table;
}
.container::after {
clear: both;
}
.container {
zoom: 1;
}
