css如何清除浮动（五）
2017-04-11 00:00
183 查看
接下来，我们介绍第一种新的清除浮动的方法，设置overflow:hidden。那它是什么意思呢？
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;
运行效果如下：
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;
运行效果如下：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 2016/2/24 1,css有几种引入方式 2,div除了可以声明id来控制，还可以声明什么控制？ 3,如何让2个div，并排显示。4，清除浮动 clear：left / right / both
- css如何清除浮动（二）
- css的浮动以及如何清除浮动
- css如何清除浮动（clear和BFC）
- css如何清除浮动（四）
- css如何清除浮动（五）
- css如何清除浮动（一）
- CSS——如何清除浮动
- css如何清除浮动（三）
- css如何清除浮动（三）
- css如何清除浮动（四）
- css如何清除浮动（二）
- css如何清除浮动（一）
- CSS中清除浮动的作用以及如何清除浮动
- CSS学习笔记一 如何清除浮动
- css如何清除浮动常用的方法有哪些
- css中的浮动以及如何清除浮动
- css 清除浮动的新方法
- 三种css清除浮动的方法
- CSS 清除浮动元素方法 整理