overflow: hidden用法，不单单是隐藏溢出

时间 2019-11-07

标签 overflow hidden 用法不单单是隐藏溢出繁體版

原文原文链接

overflow:hidden是你们经常使用到的CSS样式，可是大多数人对这个样式的理解仅仅局限于隐藏溢出，而对于清除浮动这个含义不是很了解。css

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#div1{
			width: 200px;
			/*height: 50px;*/
			padding: 10px 20px 20px 10px;
			background: red;
			margin: 0 auto;
		}
		#div2{
			width: 100px;
			height: 100px;
			background: green;
			float: left;
		}
	</style>
</head>
<body>
	<div id="div1" >
  	<div id="div2" ></div>
	</div>
</body>
</html>

图中代码定义了两个div，而且子div是规定左浮动的。不难想像浏览器中打开的效果图：

当父div没有规定height值，子div浮动后，父div只剩下padding-top+padding-bottom的30px.html

如何让子div再次将父div的高度撑开呢？当然将父div也浮动起来是比较经常使用的作法，其实还能够使用overflower:hidden来清除浮动带来的影响。浏览器

#div1{
	width: 200px;
	/*height: 50px;*/
	padding: 10px 20px 20px 10px;
	background: red;
	margin: 0 auto;
	overflow: hidden;
}

效果以下:htm

固然，咱们之前用的最多的仍是使用overflow:hidden来隐藏子元素相对于父元素的超界溢出，以下所示。blog

#div1{
	width: 200px;
	height: 50px;
	padding: 10px 20px 20px 10px;
	background: red;
	margin: 0 auto;
	overflow: hidden;
}

给父div加上固定高度后，再使用overflow: hidden将会隐藏掉子元素超出的那一部分，以下图：it

，所以咱们能够尝试这样总结：当父元素的高度是靠子元素撑开的时候，子元素浮动时，则在父元素使用overflow: hidden能够清除浮动，使得父元素的高度依旧是靠子元素撑开。class

当父元素自身设置了height属性值，则在父元素使用overflow: hidden能够使子元素超出父元素的那部分隐藏。float