關於overflow:hidden;很多人都知道他是溢出隱藏的一個屬性，但是並不是很多人知道它的一些神奇的地方！首先先講一下眾所周知的溢出隱藏吧！
溢出隱藏
一般會遇到的情況是內容超出了父級盒子，如下：
使用overflow:hidden;之后，顯示就是這樣的：
哪里超出就隱藏哪里！一般會用在一行文本超出固定寬度就隱藏超出的內容，但是這種情況一般會和省略號一起配合使用，超出位置顯示省略號（是一行文本才有效哦）：
|
1
2
3
4
5
6
7
8
9
|
.box {
width
:
200px
;
height
:
50px
;
margin
:
200px
auto
;
background
:
#ccc
;
overflow
:
hidden
;
text-
overflow
: ellipsis;
white-space
:
nowrap
;
}
|
|
1
|
<
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的背景色，那么處理辦法有：
1、給父級加一個高度height，和圖片一樣高，並且添加overflow:hidden;這兩個一起添加，兼容性會更好一些！
2、如果我們不需要給盒子添加高度，讓其自適應圖片高，那么我們可以給img添加display:block;