Html 为什么浮动元素的背景看起来与内容无关？

在下面的CSS代码中，似乎

divTwo

的背景已移到

divOne

后面。但是

divTwo

的内容似乎被抛在了后面-为什么div的背景看起来与内容无关

#divOne{
宽度：300px；
高度：100px；
背景颜色：黄色；
保证金：5px；
浮动：左
}
#第二组{
宽度：300px；
高度：100px；
填充物：5px；
背景颜色：绿色；
}

Div01
Div02

这是在简单的HTML中经常遇到的问题。在当前代码中，您没有使用任何

容器

、

包装器

或

行

。这会导致元素重叠，如果不希望它们重叠，则应为它们提供一些定位或填充。在提供的小提琴中，我为

divTwo

添加了一个50 px的

填充

，以增加它的方块显示效果

其主要思想是，您永远不会简单地开始编写代码，而是仔细考虑网页上每个元素的位置。一个好的实践是学习如何“堆叠”元素（我这样称呼它，这个术语可能不正确）。另一件事是，有一些特定的前端框架可以通过示例更好地教您如何做到这一点

Bootstrap，Zurb基金会（但Bootstrap……我不知道有多少人使用ZURB）

下面是jsfiddle，看看div到底是如何变化的：

From

浮动的定位方式

如上所述，当元素浮动时，它将从 文档的正常流程。它向左或向右移动，直到 它接触其包含框的边缘或另一个浮动元素

所以我想象当你为divOne而不是divTwo声明float时，divTwo遵循文档的正常流程，与divOne的位置相同

你可能也会发现这很有用

如果您确实希望这些是内联的，但不希望为divTwo声明float，则可以使用：

#divOne {
width: 300px;
height: 100px;
background-color: yellow;
float:inline-start;
}

#divTwo {
width: 300px;
height: 100px;
padding:5px;
background-color: green;

---

}

就像@ZobmbieChowder所说的，CSS float属性的逻辑是你有一个巨大的盒子，其中包含两个较小的盒子，现在你想要一个位于左边，另一个位于右边。如果你没有先有一个巨大的盒子，编译器就无法理解人类的逻辑，哪一个应该是左边还是右边。只有对机器来说，首先“定义”一个容器，然后讨论其元素的左或右位置才有意义

divTwo的内容不是独立移动的。内容是文本，因此在行框中呈现

现在，虽然未浮动、未清除的块忽略它们前面的浮动元素的存在，但它们包含的行框不存在。线框将避开浮动元素，并沿着浮动元素移动，如果没有空间，则在浮动元素下方移动

---

在您的示例中，旁边没有空格，因此文本位于浮动元素的下方。但是由于您为divTwo设置了一个固定的高度，因此divTwo下面和里面也没有足够的空间来放置行框。因此，文本内容溢出divTwo，因此文本显示时没有divTwo的背景。

替代@jpat827的方法是将divTwo的

clear

属性设置为

left

，或者在div one之后添加一个空div，并将其

clear

属性设置为

left

。什么

如果未浮动元素没有空间，则clear属性会阻止未浮动元素进入浮动元素下

当您清除左侧的div two时，它真正做的是将div two放置在浮动元素下面

比方说，一号舱浮到右边，那么你必须清除右边的二号舱，才能使它低于一号舱

如果有三个div，其中两个浮动到左侧和右侧，则第三个未浮动div的

clear

属性必须设置为

both

，以便它可以清除在任意方向浮动的过去元素

我希望这是有帮助的

---

谢谢你

当我开始使用CSS时，我也对float到底做了什么感到困惑。。。你应该看看视频，它真的让我大开眼界。你还可以添加

clear：两者都可以添加到
#divTwo
CSS