overflow:hidden詳細解釋

     overflow:hidden這個CSS樣式是大家常用到的CSS樣式，但是大多數人對這個樣式的了解僅僅局限于隐藏溢出，而對于清除浮動這個含義不是很了解。一提到清除浮動，我們就會想到另外一個CSS樣式：clear:both，我相信對于這個屬性的了解大家都不成問題的。但是對于“浮動”這個詞到底包含什麼樣的含義呢？我們下面來詳細的闡述一下。 

這是一個常用的div寫法，下面我們來書寫樣式。大家可以在DMX中自己做試驗

 #box{

          width:500px;

          background:#000;

          height:500px;

 }

#content {

          float:left;

          width:600px;

          height:600px;

          background:red;

 }

      給box這個div加了一個overflow:hidden這個屬性解決了這個問題。我們直到overflow:hidden這個屬性的作用是隐藏溢出，給box加上這個屬性後，我們的content 的寬高自動的被隐藏掉了。另外，我們再做一個試驗，将box這個div的高度值删除後，我們發現，box的高度自動的被content 這個div的高度值給撐開了。說到這裡，我們再來了解一下“浮動”這個詞的含義。我們原先的了解是，在一個平面上的浮動，但是通過這個試驗，我們發現，這不僅僅是一個平面上的浮動，而是一個立體的浮動！也就是說，當content 這個div加上浮動這個屬性的時候，在顯示器的側面，它已經脫離了box這個div，也就是說，此時的content 的寬高是多少，對于已經脫離了的box來說，都是不起作用的。當我們全面的了解了浮動這個詞的含義的時候，我們就了解overflow:hidden這個屬性中的解釋，清除浮動是什麼意思了。也就是說，當我們給box這個div加上overflow:hidden這個屬性的時候，其中的content 等等帶浮動屬性的div的在這個立體的浮動已經被清除了。這就是overflow:hidden這個屬性清除浮動的準确含義。當我們沒有給box這個div設定高度的時候，content 這個div的高度，就會撐開box這個div，而在另一個方面，我們要注意到的是，當我們給box這個div加上一個高度值，那麼無論content 這個div的高度是多少，box這個高度都是我們設定的值。而當content 的高度超過box的高度的時候，超出的部分就會被隐藏。這就是隐藏溢出的含義！