Question

哪些CSS规则解释了以下sceanrio：

假设我有以下HTML CSS代码段

HTML：

<div id="main">
   <div id="first">
       first div float left
   </div>
   <div id="second">
       second div does not have a float property set 
       and appears in a new line instead of next to 
       the first div
   </div>
</div>

CSS：

#first
  float: left

我想知道的是，为什么第二个div在第一个div旁边浮动，只有当它的宽度设置时。如果我用段落替换第二个div，它也会在第一个div旁边浮动。那么为什么第二个div仅在第一个div位于其宽度设置或其自己的float属性设置为向左浮动时？

顺便说一下。我不想在这里实现任何类型的布局。我只是想了解div元素和其他块元素的这些特定行为。

编辑：

行。首先感谢答案。我遇到的问题是基于这样一个事实，即我确实将第一个和第二个div的宽度设置为相同的值，这样第二个div的内容就不能在第一个上面浮动。总而言之，我想重要的是要知道具有float属性集的元素被占用页面流并且不占用任何空间。其次应该记住只有内容可以流动，而不是实际的div。

Answer 1

<div>是块级元素，它是100％宽并且在＆amp;之前有一个换行符。在正常内容流程之后。

从技术上讲，当你浮动一个<div>时，你正在将该元素从正常流中取出，因此在它之前它不再具有换行符。之后以及其他页面内容围绕它流动。

那么为什么第二个div只位于第一个旁边的位置呢？它的宽度是设置还是它自己的浮动属性设置为浮动左？

只有当有足够的空间并排包含它们时，

浮动<div>才会出现并排显示。否则，下一个浮动的<div>将换行到新行。这是因为浮动的<div>位于内容流之外且defined to behave this way in the spec。

但是，您在设置第二个（非浮动的）<div>的宽度时遇到的问题中做了一些不正确的假设。

第二个<div>本身始终位于浮动的<div>之下（意思是在后面）。然而，第二个<div>的“内容”总是围绕浮动的<div>流动。（见下面的三个例子）

因此，无论您是否设置了第二个div的宽度，其内容仍将围绕左侧浮动div，您可以在此处看到三个示例。（为了便于说明，第一个<div>为红色，不透明度为50％，第二个为蓝色，边框为绿色。）

正如你从上面三个例子中可以看到的那样，尽管存在浮动的第一个<div> ...

第二个<div>始终在屏幕的左边缘开始，尽管第二个<div>的宽度。
第二个<div>始终位于屏幕的上边缘，因为第二个<div>上方没有其他页面流内容。
第二个<div>的实际内容在浮动的第一个<div>周围（右侧）流动，只有在其容器内有足够的空间以允许它在浮动的周围流动<div>。否则，<div>的{{3}}。{/ p>

it appears as if it's starting a new line where really only its content is continuing to flow around the bottom

浮动是一个在当前向左或向右移动的框   线。浮动（或“浮动”或浮动）最有趣的特征   “浮动”框是指内容可以沿着它的边流动（或者是   禁止“清除”财产这样做。内容流下来   左侧浮动框的右侧，沿着左侧浮动框的右侧   右浮箱子。以下是float的介绍   定位和内容流;控制浮动行为的确切规则   在'float'属性的描述中给出。

浮动框向左或向右移动直到其外边缘   触摸包含块边缘或另一个浮动的外边缘。   如果有线框，则浮动框的外部顶部对齐   在当前行框的顶部。

如果浮子没有足够的水平空间，则移动   向下，直到它适合或没有更多的浮标存在。

由于浮动不在流中，因此创建了未定位的块框   在浮动箱垂直流动之前和之后，好像浮子没有   存在。但是，旁边创建的当前和后续行框   必要时缩短浮子以为边缘盒腾出空间   浮动。

以下是一大堆例子......

W3C Spec: 9 Visual formatting model, 9.5 Floats

Answer 2

是什么让你相信div是彼此相邻的？实际上他们不是。只是他们的内容彼此相邻但这不是因为DIV #second在浮动的DIV的左边。如果设置宽度无关紧要。

实际上发生的事情是浮动的DIV #first浮动到左侧。因为它漂浮了，它被取出了正常的流量。这意味着DIV #second实际上与DIV #first出现的位置相同。 DIV #second的内容虽然是内联内容，但内联内容总是围绕浮动元素流动。甚至是容器外的浮动元素。所以DIV #second在DIV #first下面，但是DIV #second的内容在DIV #first周围浮动。

为了说明这一点，我创建了这个CSS：

#first { float: left; background-color: rgba(255,0,0,0.3); }
#second { background-color: rgba(0,255,0,1); }

使用DIV #first的背景颜色的RGBA（）值的alpha值（即最后一个参数，范围从0到1）进行播放，你会看到DIV #second实际上低于DIV #first始终

Answer 3

除非清除浮点数，否则默认情况下，下一个块级元素将浮动在最后一个浮点数旁边。

我不确定你要在这里实现什么，但是如果你希望#first浮动，#second不浮动，那么你想要添加到{{{ 1}}是：#first

但是，这非常愚蠢，如果你想叠加它们，你也可以完全删除浮动属性。

Answer 4

块元素占用其父元素宽度的100％，因此即使您的第一个div被浮动，第二个div也将占用其父元素的宽度，从而落在第二行。这就是为什么如果你指定一个较小的宽度，它就会站在第一个浮动的div旁边。

如果浮动两个div，它也有效的原因是浮动元素的行为更像内联块元素，这意味着它们只会占用内部元素所需的空间。

底线是，如果你想让这两个div彼此相邻，你应该只是浮动它们中的两个。

div不会沿着前面的div浮动，float属性设置为left

4 个答案: