Question

我知道如何修复以下代码，以使文本ccc背景变为红色。但是我需要理解为什么下面的代码没有显示红色背景颜色。

div.a {
  height: 200px;
  width: 50%;
  background-color: blue;
  float: left;
}
div.b {
  height: 200px;
  width: 50%;
  background-color: red;
}

<div class="a">aa</div>
<div class="b">ccc</div>

Answer 1

其原因是float CSS属性，如documentation所述：

该元素已从页面的正常流程中移除，尽管仍然剩下一部分流量（与绝对定位相反）。

有很多方法可以解决这种情况，并解决documentation中明确提到的浮动元素周围项目的流动：

有时您可能需要强制某项移动到任何浮动项下方元素。例如，您可能希望段落保持相邻浮动，但强制标题保持不变。看到清除例子。

div.a {
  height: 200px;
  width: 50%;
  background-color: blue;
  float: left;
}
div.b {
  height: 200px;
  width: 50%;
  background-color: red;
  clear: left;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="a">aa</div>
<div class="b">ccc</div>
</body>
</html>

同样，在您的情况下，您还必须在div.b上添加浮动权限，以修复页面中.b元素的流动：

div.a {
  height: 200px;
  width: 50%;
  background-color: blue;
  float: left;
}
div.b {
  height: 200px;
  width: 50%;
  background-color: red;
  float: right;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="a">aa</div>
<div class="b">ccc</div>
</body>
</html>

另一种方法是也添加display：inline-block：

div.a {
  height: 200px;
  width: 50%;
  background-color: blue;
  float: left;
}
div.b {
  height: 200px;
  width: 50%;
  background-color: red;
  display:inline-block;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="a">aa</div>
<div class="b">ccc</div>

</body>
</html>

和另一个示例：

div.a {
  height: 200px;
  width: 50%;
  background-color: blue;
  float: left;
}
div.b {
  height: 200px;
  width: 50%;
  background-color: red;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="a">aa</div>
<br />
<div class="b">ccc</div>

</body>
</html>

Answer 2

这与以下事实有关：div.a是浮点型，因此需要定义div.b。只需将float:left;添加到div.b即可解决。答案可能会有所不同，具体取决于您要实现的目标。

<!DOCTYPE html>
<html>
<head>
<style>
div.a {
  height: 200px;
  width: 50%;
  background-color: blue;
  float: left;
}
div.b {
  height: 200px;
  width: 50%;
  background-color: red;
  float:left;
}
</style>
</head>
<body>

<div class="a">aa</div>
<div class="b">ccc</div>

</body>
</html>

Answer 3

有一个红色背景，但在蓝色div下方。红色div是静态的，因此将在float元素下呈现，因为CSS中的堆叠上下文是如何工作的。

Answer 4

您已将div.a浮动到左侧，现在它已浮动，并且div.b进入div.b

因此，如果要正确设置，则必须将浮动div.a设置为父div，然后在给定的CSS下方应用，以清除浮动div.a下的空间。，这样您就可以看到div.b

<!DOCTYPE html>
<html>

<head>
    <style>
        body::after {
            content: "";
            display: block;
            clear: both;
        }
        
        div.a {
            height: 200px;
            width: 50%;
            background-color: blue;
            float: left;
        }
        
        div.b {
            height: 200px;
            width: 50%;
            background-color: red;
        }
        /* then go for parent of floated div (div.a) and set this property to clear floated area beneath the div.a --> */
        
        #parent:after {
            clear: both;
            display: block;
            content: "";
        }
    </style>
</head>

<body>
    <!-- you must enclose the ddiv you want to float into another div  -->
    <div id="parent">
        <div class="a">aa</div>
    </div>
    <div class="b">ccc</div>

</body>

</html>

Answer 5

p {
  font-family: Lato;
}
    div.a {
      height: 200px;
      width: 50%;
      background-color: blue;
      float: left;
      position: relative;
    }
    div.b {
      height: 200px;
      width: 50%;
      background-color: red;
float:left;
position:relative;

    }



<div class="a">aa</div>
<div class="b">ccc</div>

CSS背景颜色未显示

5 个答案: