时间戳

首页 > 解决方案 > 为什么我的盒子的背景没有显示？

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

问题描述

我对当前的问题不知所措。我想用 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 是的加分点。

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

标签： htmlcss

解决方案

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

至于你的具体问题：

  1. 为什么没有出现蓝色背景？

再次引用文档：

float CSS 属性将元素放置在其容器的左侧或右侧，允许文本和内联元素环绕它。该元素已从页面的正常流程中删除，但仍是流程的一部分。

这里发生的情况是，因为红色和绿色框是浮动的，所以蓝色 div（它是一个display: block元素）将被渲染为好像这 2 个框不存在（它忽略它们）。巧合的是，您已将其设置为与红色框的大小完全相同，因此蓝色框在后面渲染并被红色框隐藏。

但是，其中的文本是内联文本，因此它被包裹在红色和绿色框周围，因此被向下（从）蓝色框推到红色框下方。

当您添加float: left到蓝色框时，它现在会识别红色框（它们都是浮动的）并被它向下推，使其可见。

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

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

但<p>它本身也是一个display: block;元素，所以也渲染得好像没有红框一样。结果是它的上边距在顶部，在红色框的上方，创建了一个空白区域。其中的文本（Text2）被红色框包裹到下一行，并且由于那里没有边距，因此它触及了红色框。

推荐阅读