overflow:hidden解决溢出隐藏、清除浮动、margin塌陷等问题

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中的原话总结这一部分内容：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

如有谬误，还请指出。

（今天是端午节，祝端午安康！）

overflow:hidden解决溢出隐藏、清除浮动、margin塌陷等问题

猜你喜欢