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

Posted 2023-03-06

【中文标题】div 不沿着前面的 div 浮动，浮动属性设置为 left

【英文标题】：div not floating along the preceding div with float property set to left

【发布时间】：2011-12-18 06:52:55

【问题描述】：

哪些 CSS 规则解释了以下场景：

假设我有以下 html CSS sn-ps

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 的内容不能围绕第一个浮动。总而言之，我想知道具有浮动属性集的元素被放置在页面流中并且不占用任何空间是很重要的。其次，应该记住只有内容可以流动，而不是实际的 div。

【参考方案1】：

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

我不确定您要在这里实现什么，但如果您希望 #first 浮动，而 #second 不浮动，您要添加到 #first 的规则是：@ 987654324@

但是，这很愚蠢，如果你想堆叠浮动属性，你还不如完全删除它们。

【参考方案2】：

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

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

底线是，如果您希望这两个 div 彼此相邻，您可能应该只浮动它们两个。

【讨论】：

我知道bock元素通常占据100%的宽度。但正如我所说，当我用一个段落替换 div 时，该段落紧挨着#first div 的位置。 p-tag 也是块元素的一个例子。让我感到困惑的是，当我设置它的宽度时，p 标签位于下一行。

【参考方案3】：

<div> 是块级元素，宽度为 100%，在正常内容流中前后有一个换行符。

从技术上讲，当您浮动 <div> 时，您将元素从正常流程中取出，因此它不再有前后换行符，并且其他页面内容也围绕它流动。

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

浮动的<div> 只有在有足够的空间来并排容纳它们时才会始终并排显示。否则，下一个浮动的<div> 将换行。这是因为浮动的<div> 位于内容流和defined to behave this way in the spec 之外。

但是，您在问题中做出了一些错误假设，即设置第二个（非浮动）<div> 的宽度时会发生什么。

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

因此，无论您是否设置第二个div 的宽度，其内容仍会围绕左侧浮动的div，如您在此处的三个示例中所示。 （为了便于说明，第一个<div> 是红色，不透明度为 50%，第二个是蓝色，带有粗绿色边框。）

Fiddle with second div wider than first

Fiddle with no set width (100%) on second div

Fiddle with second div narrower than first

正如您从上面所有三个示例中看到的那样，尽管存在浮动的第一个 <div>...

第二个<div> 总是从屏幕的左边缘开始，尽管第二个<div> 的宽度很大。

第二个<div> 总是从屏幕的顶部边缘开始，因为在第二个<div> 上方没有其他页面流内容。

第二个<div> 的实际内容在浮动的第一个<div> 周围（右侧）流动，仅在其容器内有足够空间允许它围绕浮动的<div> 流动时。否则，浮动的<div> 中的it appears as if it's starting a new line where really only its content is continuing to flow around the bottom。

W3C Spec: 9 Visual formatting model, 9.5 Floats

float 是一个在当前位置向左或向右移动的框 线。浮动（或“浮动”或 “浮动”框）是内容可以沿其侧面流动（或 'clear' 属性禁止这样做）。内容向下流动 左侧浮动框的右侧和左侧的下方 右浮动框。下面是对float的介绍 定位和内容流；控制浮动行为的确切规则 在“float”属性的描述中给出。

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

如果没有足够的水平空间放置浮动，它会被移动 向下直到它适合或没有更多的浮动。

由于浮动不在流中，因此创建了非定位块框 前后浮动框垂直流动，好像浮动没有 存在。但是，在旁边创建的当前和后续行框 浮动会根据需要缩短以为边距框腾出空间 浮动。

这里有一大堆例子......

W3C Spec: 9 Visual formatting model, 9.8 Comparison of normal flow, floats, and absolute positioning

【参考方案4】：

是什么让您相信 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() 值（即最后一个参数，范围从 0 到 1）的 alpha 值，您会看到 DIV #second 实际上低于 DIV #永远第一