overflow的取值分别有visible(默认值,多出来的内容会显示在元素框外,内容不会被裁剪)、hidden(内容被裁剪,多出来的内容不可见)、scroll(会出现滚动条,多出来的内容显示在元素框之内)、auto(如果内容超出元素范围,会自动显示滚动条,如果没有超出则不会显示。它与scroll的区别是:scroll不管内容有没有超出容器范围都会显示滚动条,而auto则超出了才会出现滚动条)和inerit(从其父元素继承overflow属性的值),本文着重讨论overflow:hidden的用法及其作用。
1、溢出隐藏
有时候为了页面更加美观我没需要隐藏元素溢出部分的内容,直接对容器设置 overflow:hidden就可以达到这个效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
section{
width: 200px;
height: 200px;
}
.hideOverflowContent{
background-color: red;
/*overflow: hidden;*/
}
.hideCont{
width: 100px;
height: 300px;
margin: 0 auto;
background-color: yellow;
}
</style>
</head>
<body>
<!--①溢出隐藏-->
<section class="hideOverflowContent">
<div class="hideCont"></div>
</section>
</body>
</html>
没有为.hideOverflowContent设置overflow:hidden时,效果如下:黄色div高度大于红色,溢出并且显示。
为.hideOverflowContent设置overflow:hidden时,效果如下:黄色div溢出部分不可见。
2、清除浮动
当没有为父容器设置高度时,父容器的高度是由其自容器撑起来的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.clearFloat{
background-color: green;
/*overflow: hidden;*/
}
.clearChile1{
width: 100px;
height: 200px;
background-color: gold;
/*position: absolute;*/
}
.clearChile2{
width: 160px;
height: 300px;
background-color: pink;
/*float: left;*/
}
</style>
</head>
<body>
<!--②清除浮动-->
<div class="clearFloat">
<div class="clearChile1"></div>
<div class="clearChile2"></div>
</div>
</body>
</html>
效果如下:
如果给子级容器设置 float(或者position:absolute/fixed,即有自容器脱离文档流),父容器高度就由未脱离标准文档流的子容器撑起来;如果所有子容器都脱离了文档流,那么父容器高度变为0,这就是有时候子容器设置了浮动父容器背景色不可见的原因,其实不是不可见,是它的高度为0。
这时候的解决方法是:给父容器设置固定的高度或者为父容器设置 overflow:hidden,这样父容器的高度就包括脱离了标准文档流的高度了。(注意:这只是针对最后一个子级div设了浮动的情况,如果浮动的不是最后一个子级div,则应该给浮动子div后面的div设置clear:both,清除它前面盒子的浮动对后面盒子的影响才能起作用)
如需了解更多清除浮动的方法请移步我的另一篇博文:清除浮动
3、解决margin塌陷问题
外边距塌陷(合并)是指当两个垂直方向的外边距相遇时(盒子1的margin-bottom和盒子2的margin-top,水平方向的margin不会这样),最终的外边距取值不是两者之和,而是取它们之间的最大值。
主要有两种情况:
① 兄弟容器之间:
当分别给兄弟容器.one和.two设置margin-bottom和margin-top时,最终的外边距并不是.one的margin-bottom和.two的margin-top之和,而是它们取它们之间的最大值(如果相等则取其中一个)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.one,.two{
width: 300px;
height: 300px;
}
.one{
background-color: red;
margin-top: 100px;
margin-bottom: 100px;
}
.two{
background-color: blue;
margin-top: 100px;
}
margin-top: 40px;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
②父子容器之间:
当父级容器和子容器都设置了margin-top(或者只给子容器设置,argin-top),最终的结果是子容器和父容器之间的外边距为0,父容器与页面顶部的外边距为父容器和子容器中的最大值。见下列代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.parent{
width: 200px;
height: 200px;
background-color: red;
margin-top: 30px;
}
.child{
width: 100px;
height: 100px;
background-color: gold;
margin-top: 40px;
}
</style>
</head>
<body>
<section class="parent">
<div class="child"></div>
</section>
</body>
</html>
父容器的margin-top为30px,子容器的margin-top为30px,但是运之后发现子容器与父容器之间的外边距依旧为0,但是父容器和浏览器之间的外边距变成了40px
实际上.parent与浏览器的margin-top还是30px,只不过子容器的margin-top更大,父容器跟着子容器一起被推了下来而已,读者可以自行实践并在浏览器中检查。这跟我们为子容器设置margin-top,结果父容器被推下来了,父子容器之间的margin依旧没变是一样道理。
但是我们要实现的是父子容器之间有个边距呀,这可怎么呢?
解决方法:
①兄弟元素之间的外边距问题:
这个好办,只给其中一个div设置margin-bottom(或者margin-top)就可以了,想要他们之间间隔多大就设多大。
②父子元素之间的外边距问题:
a.为父级盒子设置 overflow:hidden------子容器设margin-top,父容器设overflow:hidden
b.其实父子容器之间的间距除了用子元素个外边距撑开,还可以用父元素的padding-top撑开。------子容器不设margin-top,直接给父容器设置padding-top。
c.父容器相对定位,子容器绝对定位(这时候子容器是相对于父容器定位的,并且子容器已经脱离文档流)然后子容器设置top值
.parent{
width: 200px;
height: 200px;
background-color: red;
/*margin-top: 30px;*/
/*overflow: hidden;*/
position: relative;
}
.child{
width: 100px;
height: 100px;
background-color: gold;
/*margin-top: 40px;*/
position: absolute;
top: 20px;
}
d.在条件允许的情况下将父容器转为行内元素(即在父容器已经设置宽高、不需要独占一行或已经规定宽度为100%的情况下,设display:inline-block)
.parent{
width: 200px;
height: 200px;
background-color: red;
display: inline-block; /*!!!!!!*/
/*margin-top: 30px;*/
/*overflow: hidden;*/
/*position: relative;*/
}
.child{
width: 100px;
height: 100px;
background-color: gold;
margin-top: 40px;
/*position: absolute;
top: 20px;*/
}
e.让子容器浮动
.parent{
width: 200px;
height: 200px;
background-color: red;
/*display: inline-block;*/
/*margin-top: 30px;*/
/*overflow: hidden;*/
/*position: relative;*/
}
.child{
width: 100px;
height: 100px;
background-color: gold;
margin-top: 40px;
float: left;
/*position: absolute;
top: 20px;*/
}
f.为父容器设置透明的border-top(也可以不透明,视情况而定吧)
.parent{
width: 200px;
height: 200px;
background-color: red;
border-top: 1px solid rgba(0,0,0,0);
/*display: inline-block;*/
/*margin-top: 30px;*/
/*overflow: hidden;*/
/*position: relative;*/
}
.child{
width: 100px;
height: 100px;
background-color: gold;
margin-top: 40px;
/*float: left;*/
/*position: absolute;
top: 20px;*/
}
以上方法均亲测有效,但应该还有更多的解决方法,办法总比困难多,弄清原理,触类旁通,总会找到更合适、简便的解决方法的!用w3c中的原话总结这一部分内容:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
如有谬误,还请指出。
(今天是端午节,祝端午安康!)