父亲孩子的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;}