⼀. overflow:hidden 溢出隐藏
给⼀个元素设置overflow: hidden，如果该元素中的内容超出了给定的宽度或⾼度，那么超出的部分将会被隐藏，不占位。
<style type="text/css">
div {
width: 150px;
height: 60px;
background: skyblue;
overflow: hidden; /*溢出隐藏*/
}
</style>
<div>
今天天⽓很好！<br />
今天天⽓很好！<br />
今天天⽓很好！<br />
今天天⽓很好！<br />
</div>
效果如下：
⼆. overflow:hidden 清除浮动（页面塌陷）
⼀般⽽⾔，⽗级元素不设置⾼度时，⾼度随内容增加⾃适应⾼度。当⽗级元素内部的⼦元素全部都设置浮动float之后，⼦元素会脱离标准流，不占位，⽗级元素检测不到⼦元素的⾼度，⽗级元素⾼度为0。那么问题来了，如下：
<style type="text/css">
.box{
background:skyblue;
}
.kid{
width: 100px;
height: 100px;
float:left;
}
.kid1{
background: yellow;
}
.kid2{
background: orange;
}
.wrap{
width: 300px;
height: 150px;
background: blue;
color: white;
}
</style>
<body>
<div class="box">
<div class="kid kid1">⼦元素1</div>
<div class="kid kid2">⼦元素2</div>
</div>
<div class="wrap">其他部分</div>
</body>
如上，由于⽗级元素没有⾼度，下⾯的元素会顶上去，造成页⾯的塌陷。因此，需要给⽗级加个overflow:hidden属性，这样⽗级的⾼度就随⼦级容器及⼦级内容的⾼度⽽⾃适应。如下：
由于在IE⽐较低版本的浏览器中使⽤overflow：hidden；是不能达到这样的效果，因此需要加上
zoom:1;
所以为了让兼容性更好的话，如果需要使⽤overflow:hidden来清除浮动，那么最好加上zoom:1;
<style type="text/css">
.box{
background:skyblue;
overflow: hidden; /*清除浮动*/
zoom:1;
}
.kid{
width: 100px;
height: 100px;
float:left;
}
.kid1{
background: yellow;
}
.kid2{
background: orange;
}
.wrap{
width: 300px;
height: 150px;
background: blue;
color: white;
}
</style>
<body>
<div class="box">
<div class="kid kid1">⼦元素1</div>
<div class="kid kid2">⼦元素2</div>
</div>
<div class="wrap">其他部分</div>
</body>
三. overflow:hidden 解决外边距塌陷
⽗级元素内部有⼦元素，如果给⼦元素添加margin-top样式，那么⽗级元素也会跟着下来，造成外边距塌陷，如下：
<style type="text/css">
.box{
background:skyblue;
}
.kid{
width: 100px;
height: 100px;
background: yellow;
margin-top: 20px;
}
</style>
<body>
<div class="box">
<div class="kid">⼦元素1</div>
</div>
</body>
因此，给⽗级元素添加overflow: hidden，就可以解决这个问题了。
<style type="text/css">
.box{
background:skyblue;
overflow: hidden; /*解决外边距塌陷*/
}
.kid{
width: 100px;
height: 100px;
background: yellow;
margin-top: 20px;
}
</style>
<body>
<div class="box">
<div class="kid">⼦元素1</div>
</div>
</body>
331
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
