html - div 的 css 与 float 的 div 重叠？

Question

我几乎是个初学者，我想找出为什么我的 CSS 不能正常工作。问题是我将 ID 为#zona6 的 div 的背景色设置为绿色，但颜色应用于 ID 为#zona2 和#zona3 的 div。

然而，背景颜色与id为#zona6的div具有相同的比例，并且在chrome inspect元素中，div似乎就在颜色所在的位置，但其中的文本在#zona4下并且#zona5，它应该在的位置...我仔细检查了所有 div 的显示和位置，它们都设置为相对和 block 。此外，当我在 body 元素中键入内容时，div #zona6 中的文本与其重叠(这很明显，因为 div #zona6 实际上与 #zona2 和 #zona3 重叠)。

我也在 Internet Explorer 中测试了它，但我仍然找不到问题，它一定很简单，但我就是不明白。

#zona1 {
  height: 15%;
}
#zona2 {
  height: 35%;
  float: left;
  width: 50%;
  background-color: blue;
}
#zona3 {
  height: 35%;
  float: right;
  width: 50%;
}
#zona4 {
  height: 35%;
  float: left;
  width: 50%;
}
#zona5 {
  height: 35%;
  float: right;
  width: 50%;
}
#zona6 {
  height: 15%;
  background-color: green;
}

<div id="zona1">
  vrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre e brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre bwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb we brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb
  twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtr
</div>
<div id="zona2">
  vbrebrevrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbttrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb
</div>
<div id="zona3">
  ntrbrt
</div>
<div id="zona4">
  htrrwt
</div>
<div id="zona5">
  hb5ynyre
</div>
<div id="zona6">
  hh3653gterbwtebt
</div>

index.css 文件是空的。

Answer 1

只需将 Clear:both; 添加到 #zona6，这样它就不会 float 到最近的 float
这是一个jsfiddle