父-子Css错误

我试着把我的结构分成两个部分，一个是顶部部分，另一个是主体部分

我正试图让主体部分脱离顶部。由于某种原因，当我将紫色添加到主体div中时，它会在其他所有内容中着色

我在包装器中添加了

overflow:hidden

，它做了些什么，我走对了吗

---

您可以看到我的示例。

这是因为您使用了浮动元素，并且没有在它们之后清除。加

.mainbody{clear:both;}

但是为什么有

.topsection{float:left；}

？如果

主体

具有

宽度：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;}