实例代码：
<!doctype html>
<html>
<head>
<head>
<meta charset="utf-8">
<style>
div{
border:3px solid green;
width:600px;
height:200px;
padding:5px;
}
.img1{
width:200px;
height:200px;
float:right;
}
.d1{
clear:both;/*清除底部浮动*/
display:table;
}
.img2{
width:200px;
height:200px;
float:right;
}
</style>
</head>
</head>
<body>
<p>在本例中，图像高于包含它的元素，然而它被浮动了，所以它会在容器之外溢出。</p>
<div>
<h1>Without Clearfix</h1>
<img class="img1" src="img/tree.png"></img>
Lorem ipsum dolor sit amet ,consectetur adipiscing elit .Phasellus imperdiet,nulla et dictum interdum...
</div>
<p style="clear:right">请为包含元素添加clearfix hack ,以解决此问题：</p>
<div class="d1">
<h1>With Clearfix</h1>
<img class="img2" src="img/tree.png"></img>
Lorem ipsum dolor sit amet ,consectetur adipiscing elit .Phasellus imperdiet,nulla et dictum interdum...
</div>
</body>
</html>
运行效果：
评论