CSS中父div與子div——子div有內容，父div高度卻為0
分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow
也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！
我們可能在審查網頁元素時，會發現這樣的一種情況：
案例 HTMLAndCSS.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML與CSS簡單頁面效果例項</title></head><body> <div style="width:300px;background:#ccc;"> <div 從上面的程式碼來看，包含一個父div和兩個子div。而子div又有高度，但是審查元素時，卻發現該父div卻沒有高度（所以此時父div的背景色#ccc也沒有顯示出來）。這是為什麼呢？
經過網頁資料的查詢，發現是由於子元素設定了 float屬性的緣故。
（參考： http://www.jb51.net/css/74450.html http://blog.csdn.net/honglei_zh/article/details/43097513）
參考網址中說到這樣一句話： 當一個元素只包含浮動元素的時候，它會出現高度摺疊(在火狐中是這樣，IE9不會),即元素的上下底邊重合，和高度為0效果一樣。
其中文中也提到了關於解決這種現象的方法：
1 給包含元素設定高度height
2 利用overflow屬性
3 新增一個空的div
4 利用偽元素:after
詳細講解可以檢視原文——> http://www.jb51.net/css/74450.html
這裡重點對overflow進行介紹和測試。
說白了，這種出現父div高度為0的情況，是由於未清除浮動而導致的。下面來看看，父div高度為0時，繼續在父div下面新增一個div會發生腫麼樣的情況。
案例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML與CSS簡單頁面效果例項</title> <link rel="stylesheet" type="text/css" href="HTMLAndCSS.css"></head><body> <div style="width:300px;background:#ccc;"> <div style="width:100px;height:100px;float:left;background:Green;"></div> <div style="width:100px;height:100px;float:right;background:Red;"></div> </div> <div style="width: 200px;height:200px;background-color: rosybrown"> </div></body></html>
在子div設定“浮動”（float）後，似乎子div都“浮”在網頁上一樣，不在網頁其中。又加上父div高度為0，所以再在 父div 下面新增一個div時，這個div不是顯示在它們的下面，而是在父div的位置處開始顯示，出現了重疊的效果。
那在父div的css樣式中使用 overflow: hidden後呢？（使用 overflow: hidden 清除浮動——> 參考：CSS 的overflow:hidden 屬性詳細解釋 、 給我詳細講解一下overflow:hidden的用法？）
執行結果如下：
我們可以從結果發現：父div的背景色出現了，並且父div下面的div也按照預期結果在父div下面正常顯示了（沒有被 父div的子div覆蓋）。我們再來看看：
從上面我們也可以知道父div 終於有高度了（為子div的最大高度），同樣也說明了 overflow: hidden可以清除浮動。
以上知識都是我們在學習網頁設計中需要注意的。在學習網頁設計的過程中，學到了知識，但總會有似懂非懂的感覺，檢視別人的網頁原始碼時，會發覺很吃力——一系列關於網頁設計的問題（為什麼這樣設定CSS樣式 等問題）呈現在面前。這種情況出現的原因，我想這歸結於 學習還不夠深入吧~~總要注意一些細節問題，才能將CSS中的大部分常用屬性 執行自如，融會貫通~~加油！
給我老師的人工智慧教程打call！http://blog.csdn.net/jiangjunshow
