如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外：
然后我们可以向包含元素添加 overflow: auto;，来解决此问题：
实例代码；
<!doctype html>
<html>
<head>
<head>
<meta charset="utf-8">
<style>
.d1,.d2{
border:2px solid green;
margin:10px;
width:600px;
padding:10px;
}
img{
float:right;
width:150px;
height:150px;
margin:5px;
}
.d2{
overflow:auto;
}
</style>
</head>
</head>
<body>
<h1>clear 清除布局属性实例</h1>
<div class="d1">
<img class="img2" src="img/tree.png"></img>
<p>this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.</p>
</div>
<div class="d2">
<img class="img1" src="img/tree.png"></img>
<p>this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.</p>
</div>
</body>
</html>
运行效果：
评论