定位層，包裝不纏繞在其他包含層

我其實是一個有點新的CSS，但是我一個2周學習後，周圍知道我的路。然而，目前我有一個層（div標籤），我似乎無法修復一個小問題。問題如下，我創建了以下來展示我的問題。

<body style="margin: 0;"> 
    <div style="margin: 0px auto; width: 960px;" id="main"> 
    <div style="clear: both; float: left; width: 100%; height: 100px;" id="one"> 
     Hello World 
    </div> 
    <div style="clear: both; float: left; width: 100%; height: 200px;" id="two"> 
     Hello next World! 
    </div> 
    </div> 
</body>

這裏的問題是，如果你「看在邊境」（我已刪除;背景顏色和邊框屬性來提高代碼的可讀性），你會發現，第一主DIV沒有按」 t圍繞第一和第二。如果我想修復它，我只需要添加一些內容到主圖層。導致下面的代碼：

<body style="margin: 0;"> 
    <div style="margin: 0px auto; width: 960px;" id="main"> 
    <div style="clear: both; float: left; width: 100%; height: 100px;" id="one"> 
     Hello World 
    </div> 
    <div style="clear: both; float: left; width: 100%; height: 200px;" id="two"> 
     Hello next World! 
    </div> 
    LET ME SOLVE IT! 
    </div> 
</body>

現在的問題是，我如何得到最後的結果，而不添加「只是內容」我的主層？

非常感謝您閱讀我的問題並回答它！

對於圖片，請參閱：http://www4.picturepush.com/photo/a/7808622/img/7808622.png和http://www3.picturepush.com/photo/a/7808636/img/7808636.png

（注：均爲直接聯繫;））

來源

2012-03-16 Snowflake

添加溢出：隱藏你的div容器。這將迫使div將你的內部divs「包裝」起來。歡迎來到堆棧溢出！

來源

2012-03-16 14:39:55 huzzah

此外，divs是默認的塊元素，所以不需要將寬度：100％添加到內部div，因爲它們已經伸展以適合其父div（960px）。 – huzzah 2012-03-16 14:42:12

我有個問題，你能解釋爲什麼會發生這種情況嗎？感謝您的熱烈歡迎，我真的很感謝您的迴應！ – Snowflake 2012-03-16 15:20:14

嘿，好問題。你可以在這裏找到這個答案的解釋：http://stackoverflow.com/questions/3400749/how-does-css-overflowhidden-work-to-force-an-element-containing-floated-elem但它有點難把你的頭包裹起來。順便說一下，如果你喜歡我的回答並發現它有用，也許你可以考慮將它標記爲可接受的答案，這樣我就可以得到一點SO代表汁。快樂的編碼！ – huzzah 2012-03-16 15:33:41

雪花
添加一個清晰的div，將其作爲包裝中的最後一個div。此外，如果您的包裝具有固定寬度，那麼請避免使用百分比來表示寬度，然後對內部div使用固定寬度。希望這有助於！

來源

2012-03-16 16:03:23

定位層，包裝不纏繞在其他包含層

回答

相關問題