代码示例：（标识：css_layout_clearfix）
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid #4CAF50;
padding: 5px;
}
.img1 {
float: right;
}
.clearfix {
overflow: auto;
}
.img2 {
float: right;
}
</style>
</head>
<body>
<h1>Clearfix</h1>
<p>在本例中，图像高于包含它的元素，然而它被浮动了，所以它会在容器之外溢出：</p>
<div>
<img class="img1" src="/static/demo/images/logo-3.png" alt="（www.sou-xun.com）" width="180" height="167">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>
<p style="clear:right">请为包含元素添加一个带有 overflow: auto; 的 clearfix 类，以解决此问题：</p>
<div class="clearfix">
<img class="img2" src="/static/demo/images/logo-3.png" alt="（www.sou-xun.com）" width="180" height="167">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>
</body>
</html>
