父子的 Css 错误

Question

我尝试将我的结构分为两个部分，一个是顶部部分，另一个是主体部分。

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

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

可以看我的例子here .

Answer 1

那是因为您使用了 float 元素并且没有在它们之后清除。添加

.mainbody{clear:both;}

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

overflow:hidden 做了一些思考，因为如果你有一个 block 元素，在他之前有一些 float 元素，并且你将 overflow 设置为不同于他可见的，你正在创建列。所以 mainbody 不在 topsection 下。

编辑:

即使你删除了无意义的 .topsection{float:left;}，它也不会起作用，因为 topright 和 topleft 不是也清除了 float 元素。所以你也必须添加 .mainbody{clear:both;}，或者将你的 topsection 更改为:

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

然后

.clear{clear:both;}