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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。