使用overflow:auto自动溢出对元素进行布局
实例代码；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.d1{
border:3px solid brown;
width:600px;
padding:10px;
}
.m1{
width:150px;
height:150px;
float:right;
}
.d2{
border:3px solid brown;
overflow:auto;
width:600px;
padding:10px;
}
.m2{
width:150px;
height:150px;
float:right;
}
</style>
</head>
<body>
<h1>Clearfix hack</h1>
<p>在本例中，图像高于包含它的元素，然而它被浮动了，所以它会在容器之外溢出：</p>
<div class="d1"><img class="m1" src="img/flower-4.jpg"></img>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="d2"><img class="m2" src="img/flower-4.jpg"></img>Lorem ipsum dolor sit amet ,consectetur adipiscing elit.Phasellus imperdiet,nulla et di ctum interdum...</div>
</body>
</html>
运行效果：
评论