關於overflow:hidden

（本文只針對hidden這個值的用處進行闡述）

關於overflow:hidden;不少人都知道他是溢出隱藏的一個屬性，可是並非不少人知道它的一些神奇的地方！首先先講一下衆所周知的溢出隱藏吧！

溢出隱藏

通常會遇到的狀況是內容超出了父級盒子，以下：

使用overflow:hidden;以後，顯示就是這樣的：

哪裏超出就隱藏哪裏！通常會用在一行文本超出固定寬度就隱藏超出的內容，可是這種狀況通常會和省略號一塊兒配合使用，超出位置顯示省略號（是一行文本纔有效哦）：

.box {
	width: 200px;
	height: 50px;
	margin: 200px auto;
	background: #ccc;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

<div class="box"> 我是文本內容我是文本內容我是文本內容我是文本內容我是文本內容我是文本內容我是文本內容我是文本內容我是文本內容我是文本內容我是文本內容我是文本內容我是文本 </div>

 

 使用這種方式的話，盒子必定要是塊級盒子，而且有寬度哦！

以上只是說了它自己溢出隱藏的功能，那麼接下來講一下它奇特的一些功能！

overflow:hidden;清除浮動

佈局的時候確定會有一種狀況，在一個父級盒子中，有左右浮動的兩個子級盒子，也就是常見的左右佈局，可是子級的內容不定，會多也會少，這個時候父級就不能給必定的高度，而是根據子級的內容的多少來改變，若是不給高度，那麼頁面就會有塌陷的問題，什麼是父級塌陷的問題呢？咱們先來了解一下！

首先下面這個是父級（紅色的盒子）給了必定的高度，而且左右兩個子級浮動，顯示佈局是沒有問題的，

可是如今咱們想的是，right裏面的內容增長，那麼父級盒子應該一塊兒增高，而且將footer部分頂下去，那麼就不給紅色父級高度，讓父級自適應，這個問題你們通常會想到刪除高度，可是問題就來了：

相信不少人在寫頁面的時候都會遇到這個相似的問題，那這個問題就是父級塌陷了！咱們能夠看到紅色的父級再也不顯示，然而footer部分跑到了紅色盒子的兩個子級的下面去了。能夠這麼通俗的去理解：兩個子級由於浮動的關係，脫離了標準流，可是父級沒有給高度，父級就認爲它沒有任何內容，因此高度就不會被內容撐開，至關於父級的高度是0px;那麼跟他平級的盒子footer,就會按照標準流的排布，緊挨着平級的紅色盒子排着下來，只是紅色的盒子高爲0而已。這個就形成了頁面的塌陷！那麼這個是時候就要靠overflow：hidden;發揮它的做用了！咱們先加上它看看什麼效果：

這種狀況是徹底沒有給父級加高度，只是加了一個overflow:hidden;若是這個時候咱們一樣不給浮動的右盒子高度，讓它靠本身的內容撐開，就想列表新聞同樣，列表多了，盒子就大了，那麼紅色的父級也會跟着增高的

假設right內容有點少

如今增長right

如今能夠看到父級隨着子級的內容的多少而改變高度，對佈局不形成任何影響！

若是你在ie比較低版本的瀏覽器中使用overflow：hidden；也不能達到這樣的效果，那麼就加上 zoom:1;

因此爲了讓兼容性更好的話，若是使用overflow:hidden;來清除浮動，解決父級塌陷這個問題的話，建議配合 zoom:1;來使用，即：overflow:hidden;zoom:1;

 

 

解決插入圖片時的底部留白問題！

插入圖片時，若是存放圖片的父級盒子沒有給高度，那麼父級盒子根據圖片高度撐開，而且會多出幾像素，例如：

底部那個紅色就是父級盒子box的背景色，那麼處理辦法有：

一、給父級加一個高度height，和圖片同樣高，而且添加overflow:hidden;這兩個一塊兒添加，兼容性會更好一些！

二、若是咱們不須要給盒子添加高度，讓其自適應圖片高，那麼咱們能夠給img添加display:block;

 

若是本文對你有幫助，記得推薦一下哦！