Question

我对当前的问题不知所措。我想用HTML / CSS放置三个框，左边两个，右边一个。为了标记框的区域，我选择了三种不同的背景：红色，绿色和蓝色。一切正常，但不显示蓝色背景。我想我一定犯了一个非常愚蠢的错误，但我找不到它。

这是HTML：

.boxupperleft {
  float: left;
  width: 50%;
  height: 100px;
  background: red;
}

.boxright {
  float: right;
  width: 50%;
  height: 200px;
  background: green;
}

.boxlowerleft {
  width: 50%;
  height: 100px;
  background: blue;
}

<div class='boxupperleft'>
  <p>Text1</p>
</div>
<div class='boxright'>
  <p>Text3</p>
</div>
<div class='boxlowerleft'>
  <p>Text2</p>
</div>

用于解释为什么Text1和Text3不在框顶部，而Text2在框顶部的奖励点。

编辑：我刚刚发现，当我在“ boxlowerleft”的定义中添加“ float：left”时，背景就在那里，但这对我来说仍然没有意义。为什么背景需要浮动？

Answer 1

@Temani Afif通过非常有用的链接发表了评论，以解释浮动行为（this和this）。这些帖子中有一些示例来演示float如何工作。您应该检查一下。

关于您的特定问题：

为什么不显示蓝色背景？

再次引用文档：

float CSS属性将元素放置在其容器的左侧或右侧，从而允许文本和行内元素环绕它。该元素已从页面的常规流程中删除，尽管仍然保留了一部分。

这里发生的是，因为红色和绿色框处于浮动状态，所以将显示蓝色div（这是一个display: block元素），就好像这两个框不在此处一样（忽略它们）。巧合的是，您已将其设置为与红色框完全相同的大小，因此蓝色框被呈现在后面，并被红色框隐藏。

尽管其中的文本是嵌入式文本，所以它被包裹在红色和绿色框中，因此被从蓝色框（下）下推到红色框下。

当您将float: left添加到蓝色框中时，它现在会识别红色框（它们都处于浮动状态）并被其按下，使其可见。

为什么Text1和Text3不在顶部，而Text2在顶部？

那是因为您所有的文本也都在<p>元素内。 <p>具有默认的顶部和底部边距，因此它们与框顶部之间有一定间距。

但是<p>本身也是一个display: block;元素，因此也将其呈现为好像没有红色框一样。结果是其顶部边距位于红色框上方的顶部，从而创建了空白空间。其中的文本（Text2）被红色框包裹到下一行，并且由于那里没有空白，因此触摸了红色框。

为什么我的盒子的背景没有显示？

1 个答案: