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中对它进行了测试，但仍然无法找到问题，它必须简单，但我还是不能解决。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

index.css文件为空。

Answer 1

由于您已经为某些div使用了浮点值，因此您还应该将float应用于剩余的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技术。在＆＃34; floating＆＃34;

之后的元素上应用clearfix类

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

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

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

Answer 3

只需将Clear:both;添加到#zona6，这样就不会浮动到最近的浮点数这是jsfiddle

Answer 4

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

可能对您有很大帮助的一件事是能够使用inspect元素分别查看每个css属性的效果。如果您使用的是Chrome，请右键单击页面并选择检查选项，然后单击页面上的html元素以查看右侧的css属性。您可以打开和关闭每个css属性以查看它具有的效果。 -Alyssa

Answer 5

解决起来很简单。它的行为与此类似，因为display未设置。只需添加display: inline-block即可使其行为......好吧......一个块;）

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

我希望它有所帮助:)。

div的css重叠浮动的div？

5 个答案: