接下来，我们介绍第一种新的清除浮动的方法，设置overflow:hidden。那它是什么意思呢？
overflow就是“溢出”的意思， hidden就是“隐藏”的意思。
| 1 overflow:hidden; |
表示“溢出隐藏”。所有溢出边框的内容，都要隐藏掉。
overflow本意就是清除溢出到盒子外面的文字。但是，前端开发工程师又发现了，它能做偏方。也就是overflow也可以用来清除浮动。
一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。这是一个偏方。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动方法4</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
div{
width: 300px;
border: 5px solid green;
}
.p1{
float: left;
width: 100px;
height: 150px;
background-color: red;
}
.p2{
float: left;
width: 100px;
height: 100px;
background-color: yellow;
}
.p3{
float: left;
width: 100px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div>
<p class="p1"></p>
<p class="p2"></p>
<p class="p3"></p>
</div>
</body>
</html>
运行结果：
可以看出，此时div没有设置高度，而且三个p标签也设置浮动，所以div的没有撑出高度。为了清除浮动，我们可以对div设置 overflow:hidden;
运行效果如下：
扫一扫
1609
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
