css 对于 div 重叠 div 哪些是浮动的？

Question

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

但是，背景颜色与 ID 为 #zona6 的 div 具有相同的比例，并且在 chrome 检查元素中，div 似乎恰好位于颜色是，但其中的文本在#zona4 和#zona5 下，它应该在哪里......我三次检查了所有 div 的显示和位置，它们都设置为相对和块.此外，当我在 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

由于您已经为某些 div 使用了浮点值，因此您也应该将浮点值应用于剩余的 div。由于您没有为 #zona6 提供任何浮点值，它会自动将自己置于 #zona1 下，这就是为什么您会看到 div #zone6 与其他重叠。提供 float: left 和 width: 100% 来降低它

<html>

<head>
    <style>
        #zona1 {
            height: 15%;
            float: left;
        }
        
        #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;
            width: 100%;
            float: left;
        }
    </style>
</head>

<body>
    <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>
</body>

</html>

Answer 2

使用float属性时需要应用clearfix技术。在 "floating"

之后的元素上应用 clearfix class

然后，在您的 CSS 中包含以下内容：

.clearfix:after {
   content: '';
   display: block;
   clear: both;
}

可以找到一些帮助 here（葡萄牙语）

Answer 3

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

Answer 4

您看到绿色背景是因为您在#zona4 和#zona5 上的左浮动属性。浮动将这些元素移出典型的文档流，绿色背景填充在它们后面，因此它们本身实际上并没有绿色背景。一个 clearfix 应该给你你想要的效果。这只是浮点数可以以奇怪的方式表现的一个例子。

可能对您有很大帮助的一件事是能够使用检查元素单独查看每个 css 属性的效果。如果你使用的是Chrome，右击页面选择inspect选项，然后点击页面上的html元素，就可以看到右侧的css属性。您可以打开和关闭每个 css 属性以查看其效果。 -艾丽莎

Answer 5

解决起来很简单。它的行为是因为 display 没有设置。只需添加 display: inline-block 使其表现得像...好吧...一个块 ;)

#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;
  /* display: block; */ /* to make it appear on the next line. */
  display: inline-block;
}

<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>

希望对您有所帮助:)

css 对于 div 重叠 div 哪些是浮动的？

css for a div overlaps divs which are floating?

html

css

overlap