身體不擴大，包括相對定位的元素

Question

我試圖設計一個相對定位的div，這反過來將包括兩個div s。孩子div都沒有一個固定的高度，但它們隨着內容的不同而不同，所以父母div隨着孩子div的高度擴大。現在設計工作正常，但是當我使用Firebug分析代碼時，我發現在螢火蟲上的標籤上徘徊時，只有整個屏幕的一小部分顯示爲主體。側面板證實了它，身體的寬度是好的，但高度爲0.這意味着父div的高度爲0，但Firebug告訴我它不是，它是大約560px。這怎麼可能？我知道，如果內容絕對定位，元素不會隨其內容而擴展，但此處兒童div s是相對定位的，那爲什麼父母沒有擴展其內容？小提琴在http://jsfiddle.net/Cupidvogel/y79NS/6/。釷截圖（請放大瞭解我的觀點是，當我嘗試代碼爲Firefox中一個完整的HTML頁面！）：

Answer 1

這裏發生的事情是普通的瀏覽器行爲，你浮動的div，所以沒有在'正常'流程，因爲浮動屬性。 所以身體是身高0，因爲身體不能計算'不在那裏'的元素的高度。

將div class =「clear」移出div class =「main」並刪除浮動屬性以及div class =「clear」，問題解決了。

觀點：http://jsfiddle.net/y79NS/8/

Answer 2

在你的CSS，div.clear - 你正在使用，以試圖清除漂浮物 - 本身漂浮在左邊。這意味着它不是文檔流程的一部分，因此無法清除任何內容。

刪除float的伎倆：

.clear { width: 400px; clear: both; position: relative; } 

另外，如果你想div.clear被浮動出於某種原因，there are a wide variety of other ways to clear your floats。

編輯：div.main有520px的高度，因爲它是浮動和浮動的元素「咬合」他們的孩子的維度。如果你將body左移（請不要;這不是一個好主意），它也會「抓住」它的孩子的尺寸，並具有5​​20px的設置高度。