css overflow: hidden 的用法(溢出隱藏及清除浮動)

發(fā)布時間：2020-03-13 16:13:43 作者：開水水

我要評論

overflow:hidden是經(jīng)常用到的一個css屬性，它有兩種常用用法：溢出隱藏和清除浮動，這里就為大家介紹一下,需要的朋友可以參考下

溢出隱藏

就是隱藏超出規(guī)定高度的文本或者圖像信息。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div {background-color: yellow;width: 350px;height: 100px;overflow: hidden;}
	</style>
</head>
<body>
<p>元素中的內(nèi)容超出了給定的寬度和高度屬性，overflow屬性<br>可以確定顯示的方式，以及是否顯示滾動條。</p>
<div>這個屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會如何處理。<br>如果值為 hidden，則隱藏超出范圍的部分。<br>如果值為 scroll，則顯示滾動條。<br>如果值為 visible，則超出部分會呈現(xiàn)在元素框之外。<br>如果值為auto，則為自動；文本超出元素框，則顯示滾動條，沒有超出，則不顯示滾動條。<br>如果值為inherit，則繼承父元素的overflow屬性的值。</div>
</body>
</html>

下圖分別是值為hidden和值為auto時截取

還有一個是單行顯示文本信息，超出部分用省略號顯示（強(qiáng)調(diào)一下：必須是一行文本顯示才有效哦！）

div {
    background-color: yellow;
    width: 350px;
    margin: 100px auto;
    white-space: nowrap;/*強(qiáng)調(diào)文本在一行內(nèi)顯示*/
    overflow: hidden;/*溢出內(nèi)容為隱藏*/
    text-overflow: ellipsis;/*溢出文本顯示省略號*/
    }

清除浮動
布局的時候經(jīng)常會用這種左右布局：一個父盒子，父盒子中包含 left 和 right 兩個 child 盒子。但是 child 的內(nèi)容個數(shù)大小都不確定，也就不能給父盒子固定的高度，父盒子高度就需要根據(jù) child 盒子高度來改變。下面我們來了解一下！

下面是父盒子給了200px的高度，兩個 child 盒子左右浮動，顯示是沒有問題的。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {margin: 0;padding: 0}
		.header {background-color: #333;color: #fff;text-align: center;height: 80px;line-height: 80px;}
		.father_box {width: 500px;height: 200px;margin: 0 auto;background-color: yellow;}
		.child_left {width: 100px;height: 100px;background-color: blue;float: left;}
		.child_right {width: 200px;height: 150px;background-color: blue;float: right;}
		.footer {background-color: #333;color: #fff;text-align: center;height: 80px;line-height: 80px;}
	</style>
</head>
<body>
	<div class="header">header在這兒</div>
	<div class="father_box">
		<div class="child_left">child_left</div>
		<div class="child_right">child_right</div>
	</div>
	<div class="footer">footer在這兒</div>
</body>
</html>

當(dāng)右面的盒子內(nèi)容增加，父盒子也就應(yīng)該隨著增高，這時，我們通常都會刪除父盒子的高度，讓父盒子自適應(yīng)高度，但是結(jié)果卻是這樣。兩個 child 盒子覆蓋了 footer ，這是因?yàn)椋簝蓚€ child 因?yàn)楦拥年P(guān)系，脫離了標(biāo)準(zhǔn)流，但是父盒子沒有給高度，父盒子就認(rèn)為它沒有任何內(nèi)容，所以高度就不會被內(nèi)容撐開，相當(dāng)于父級的高度是0px;那么跟他平級的盒子footer,就會按照標(biāo)準(zhǔn)流的排布，緊挨著平級的黃色父盒子排著下來，就造成了頁面的排布紊亂（也叫頁面的塌陷）。

這時我們給父盒子加一個 overflow:hiffen; 這時頁面就變成了這樣，父盒子高度隨著 child 盒子增高也增高了。

如果在IE比較低版本的瀏覽器中使用overflow:hidden;也不能達(dá)到這樣的效果，那么就加上 zoom:1; 即：overflow:hidden;zoom:1;

這個原理其實(shí)是一個叫做BFC(Block formatting context)的概念在起作用，也就是“塊格式化上下文”。BFC定義了一塊獨(dú)立的渲染區(qū)域，規(guī)定了其內(nèi)部塊級元素的渲染規(guī)則，其渲染效果不受外界環(huán)境的干擾。

對BFC感興趣的小伙伴們可以再去深入了解一下啦！

解決插入圖片后圖片底部的留白問題
插入圖片后，由于box盒子沒有給定高度，所以會被圖片的高度撐開，并會留下幾個像素的空隙（紅色部分）。

<!DOCTYPE html>
<html lang="en">
<head>
	<style type="text/css">
		* {margin: 0;padding: 0;list-style: none;}
		.box {width: 200px;background-color: red;margin: 0 auto;}
	</style>
</head>
<body>
	<div class="box">
		<img src="img02.jpg" width="200" height="200" alt="">
	</div>
</body>
</html>