现代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;
}