父親孩子的Css錯誤

Question

我試圖在我的結構中創建兩個部分，一個是頂部部分，另一個是主體部分。

我正在試圖讓主體div從頂端部分脫離。出於某種原因，當我將紫色添加到主體div中時，它在所有其他顏色中着色！

我將overflow:hidden添加到包裝，它做了什麼，我在正確的道路上？

你可以看我的例子here。

Answer 1

那是因爲你使用了浮動元素，並沒有清除它們。 Add

.mainbody{clear:both;} 

但爲什麼你有.topsection{float:left;}？如果mainbody有width: 100%，它什麼都不做。

而overflow:hidden做了一些事情，因爲如果你有一個在他之前有一些浮動元素的塊元素，並且你設置了overflow與他不同，你正在創建列。那麼mainbody不在topsection之下。

編輯：

即使你刪除廢話.topsection{float:left;}，它不會工作，因爲topright和topleft不會被清除浮動元素了。所以，你必須添加.mainbody{clear:both;}過，或者改變您的topsection到：

<div class="topsection"> 
    <div class="topright">...</div> 
    <div class="topleft">...</div> 
    <div class="clear"></div> 
</div> 

然後

.clear{clear:both;}