Question

我试图学习CSS但我必须遗漏一些东西。

在下面的CSS代码中，divTwo的背景似乎已移至divOne之后。但是divTwo的内容似乎被遗忘了 - 为什么div的背景似乎与内容无关？

＆＃13;

#divOne {
  width: 300px;
  height: 100px;
  background-color: yellow;
  margin:5px;
  float:left
}
#divTwo {
  width: 300px;
  height: 100px;
  padding:5px;
  background-color: green;
}

＆＃13;

<div id="divOne">Div01</div>
<div id="divTwo">Div02</div>

＆＃13;

导致Chrome

Answer 1

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

现在，在未展开的情况下，未清除的块会忽略它们之前存在的浮动元素，它们包含的行框不会。线框将避开浮动元素并沿着浮动元素移动，或者如果没有空间，则浮动元素下方。

在您的示例中，旁边没有空格，因此文本已经在浮动元素下面。但是既然你已经为divTwo设置了一个固定的高度，那么下面就没有足够的空间了，而且在divTwo里面也没有这个空间。所以文本内容溢出 divTwo，因此文本显示后面没有divTwo的背景。

Answer 2

来自Mozilla provided Float Documentation

如何定位花车

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

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

您可能还会发现Documentation for CSS Display有用。

如果你确实想要这些内联，但又不想为divTwo声明float，你可以使用：

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

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

}

Answer 3

这只是在简单的HTML中经常遇到的事情。在您当前的代码中，您没有使用任何containers，wrappers或rows。这导致元素重叠，如果您希望它们不重叠，您应该给它们一些定位或填充。在提供的小提琴中，我为padding添加了divTwo 50 px，以便增加它的框显示它看起来更好。

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

Bootstrap，Zurb Foundation（但Bootstrap ......我不确定有多少人使用Zurb）

这是JS小提琴，看看div的确切变化：JS Fiddle

Answer 4

像@ZobmbieChowder所说，CSS浮动属性的逻辑是你有一个巨大的盒子，其中包含两个较小的盒子，现在你想要一个位于左侧而另一个位于右侧。如果你没有先装好这个巨大的盒子，那么编纂者就不会得到人的逻辑，即左边或右边的逻辑。只有你定义的机器才有意义。首先是一个容器，然后左右讨论它的元素位置。

Answer 5

@ jpat827答案的替代方法是将div 2的clear属性设置为left，或者在div 1之后添加一个空div并设置它{{1} }属性到clear。什么

clear属性，如果没有留出空间元素的空间，则可以防止未展开的元素进入浮动元素。

当你清除左边的div时，它真正做的是它将div二放在浮动元素下面。

让我们说，div one浮动到右边，然后你必须将div 2清除到右边，以便将它带到div 1之下。

如果有三个div，其中两个是左右浮动的，那么第三个未开启的div的left属性必须设置为clear，以便它可以清除过去的元素向两个方向漂浮。

我希望这很有帮助。

谢谢

了解CSS浮动属性

5 个答案: