子元素浮動(dòng)，父元素高度為0現(xiàn)象解釋和原理淺見(jiàn)

   有的人在寫(xiě)頁(yè)子的時(shí)候常常會(huì)碰見(jiàn)這樣的一個(gè)問(wèn)題，就是有一個(gè)父級(jí)的div下面有子元素，子元素浮動(dòng)起來(lái)后，父元素的高度變成0，撐不起來(lái)父級(jí)了。

  現(xiàn)在先不說(shuō)解決辦法，先說(shuō)下float屬性，float定義：float 屬性定義元素在哪個(gè)方向浮動(dòng)。以往這個(gè)屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍，不過(guò)在 CSS 中，任何元素都可以浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論它本身是何種元素。（摘自：w3c）。

  從定義看出，其實(shí)float屬性一開(kāi)始是被應(yīng)用與圖片，來(lái)形成文字環(huán)繞效果的，任何的元素只要定義了float屬相，就自動(dòng)的變成一個(gè)塊級(jí)元素，同時(shí)本身就擁有了寬、高等屬性。

  由于浮動(dòng)框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。摘自w3c。 從這句話中看出，其實(shí)定義了float屬性后，其自身是脫離普通文檔流的，所以父級(jí)就會(huì)變?yōu)?.

  知道原因后，其實(shí)很容易找到解決辦法了，那就是清除浮動(dòng)，或者讓其父元素跟著浮動(dòng)，還有一種辦法就是其父元素屬性加上 overflow:hidden,下面說(shuō)下為什么加上這個(gè)屬性就會(huì)解決這個(gè)問(wèn)題。

  這個(gè)屬性的定義：overflow 屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情。摘自w3c。 看其字面意思，其實(shí)就是在他內(nèi)容超出后所作的措施，那為什么父級(jí)加上這個(gè)屬性后，浮動(dòng)就會(huì)關(guān)閉。overflow:hidden屬性相當(dāng)于是讓父級(jí)緊貼內(nèi)容，這樣即可緊貼其對(duì)象內(nèi)內(nèi)容（包括使用float的div盒子），從而實(shí)現(xiàn)了清除浮動(dòng)；

   overflow有4個(gè)值：

    visible 元素的內(nèi)容在元素框之外也可見(jiàn)，內(nèi)容超出元素框時(shí)不會(huì)改變?cè)乜虻男螤睢?/p>

    scroll 元素的內(nèi)容會(huì)在元素框的邊界處裁剪，溢出的內(nèi)容將看不見(jiàn)，但是瀏覽器會(huì)使用一個(gè)滾動(dòng)條（或類似的東西）來(lái)訪問(wèn)溢出的內(nèi)容，不會(huì)改變?cè)乇旧淼男螤睢?/p>

    hidden 元素的內(nèi)容會(huì)在元素框的邊界處裁剪，不過(guò)不會(huì)提供滾動(dòng)接口使用戶訪問(wèn)溢出的內(nèi)容，也就是說(shuō)被裁剪的內(nèi)容對(duì)用戶來(lái)說(shuō)不可用。

    auto 由瀏覽器自動(dòng)判斷采用何種行為，不過(guò)都建議在必要時(shí)提供一個(gè)滾動(dòng)機(jī)制。