css - 父子的 CSS 错误

Question

我试图为我的结构制作两个部分，一个是顶部部分，另一个是主体部分。

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

我添加overflow:hidden到包装器中，它做了一些事情，我在正确的道路上吗？

你可以在这里看到我的例子。

Answer 1

Thats because you used floating elements and didn't clear after them. Add

.mainbody{clear:both;}

But why do you have .topsection{float:left;}? If mainbody has width: 100%, it does nothing.

And overflow:hidden did somethink because if you have a block element with some floating elements before him, and you set overflow different than visible to him, you are creating columns. So then mainbody wasn't under topsection.

Edit:

Even if you remove the nonsense .topsection{float:left;}, it won't work because topright and topleft are not cleared floating elements too. So you have to add .mainbody{clear:both;} too, or change your topsection into:

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

And then

.clear{clear:both;}