overflow:hidden 隐藏溢出，清除浮动
2016-08-24 本文已影响1195人
天天发呆
overflow:hidden两个作用：1、隐藏溢出；2、清除浮动
先讲解隐藏溢出功能，先编写如下代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>overflow测试</title>
<style>
.father{
background-color: #000;
border:2px solid blue;
}
.son{
width: 300px;
height: 300px;
background-color: red;
border:2px solid #000;
}
</style>
</head>
<body>
<div class='father'>
<div class="son"></div>
</div>
</body>
</html>
显示效果如下：
屏幕快照 2016-08-24 16.34.30.png
这里定义了两个div标签，父标签未定义宽度高度信息，子标签定义宽高为300px，此时子标签会将父标签的高度撑开。
如果为父标签设定宽度高度属性，width:200px，height: 200px，子元素宽高为100px，即样式如下
<style>
.father{
width: 200px;
height: 200px;
background-color: #000;
border:2px solid blue;
/*overflow: hidden;*/
}
.son{
/*float:left;*/
width: 100px;
height: 100px;
background-color: red;
border:2px solid #000;
}
</style>
此时显示为
屏幕快照 2016-08-24 16.47.51.png
如果为父标签设定宽度高度属性，width:200px，height: 200px，子元素宽高为300px，即样式如下
<style>
.father{
width: 200px;
height: 200px;
background-color: #000;
border:2px solid blue;
}
.son{
width: 300px;
height: 300px;
background-color: red;
border:2px solid #000;
}
</style>
此时父标签会显示为宽度200px，高度200px，不会被子元素撑开，子元素超出的部分也会以溢出的形式显示，溢出部分超出父元素的边界，如图
屏幕快照 2016-08-24 16.41.58.png
也就是说在不指定父元素宽度高度时，父元素默认被子元素撑开，指定父元素宽高时，父元素将照自己正常的宽高显示，不会被子元素影响，子元素超出的宽高将溢出显示。
但是在子元素溢出显示时，为父元素添加 overflow: hidden; 即样式如下
<style>
.father{
width: 200px;
height: 200px;
background-color: #000;
border:2px solid blue;
overflow: hidden;
}
.son{
/*float:left;*/
width: 300px;
height: 300px;
background-color: red;
border:2px solid #000;
}
</style>
显示如图
屏幕快照 2016-08-24 17.02.17.png
此时子元素超出的宽度和高度被隐藏，即overflow:hidden实现了隐藏子元素溢出的功能
下面讲解清除浮动功能，编写如下代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>overflow测试</title>
<style>
.father{
background-color: #000;
border:2px solid blue;
}
.son{
float:left;
width: 300px;
height: 300px;
background-color: red;
border:2px solid #000;
}
</style>
</head>
<body>
<div class='father'>
<div class="son"></div>
</div>
</body>
</html>
显示效果如图
屏幕快照 2016-08-24 17.08.16.png
这里与本篇文章第一部分代码唯一的不同在于为子元素添加了浮动，float:left;
可以看到此时子元素未能够将父元素撑开，因为在添加浮动特性之后，此时子元素在浏览器的侧面已经脱离了父元素，此时子元素的宽度高度不会再影响父元素
但是如果为父元素添加overflow: hidden;属性，浮动的子元素依然可以将父元素撑开，如下
<style>
.father{
background-color: #000;
border:2px solid blue;
overflow: hidden;
}
.son{
float:left;
width: 300px;
height: 300px;
background-color: red;
border:2px solid #000;
}
</style>
显示如下
屏幕快照 2016-08-24 17.17.15.png
由此可见overflow: hidden;清除浮动的作用
我们可以添加多个浮动的子元素，并让他们撑开父元素，如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>overflow测试</title>
<style>
.father{
background-color: #000;
border:2px solid blue;
overflow: hidden;
}
.son{
float:left;
width: 300px;
height: 300px;
background-color: red;
border:2px solid #000;
}
</style>
</head>
<body>
<div class='father'>
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
</body>
</html>
显示如下
屏幕快照 2016-08-24 17.19.44.png
以上显示效果截图均在Safari浏览器下进行
