css - float 属性设置为左侧的 div 不沿着前面的 div float

Question

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

假设我有以下 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 float 在第一个 div 旁边，只有当它的宽度被设置时。如果我用一个段落替换第二个 div，它也会 float 在第一个 div 的旁边。那么，为什么第二个 div 仅在其宽度已设置或其自身的 float 属性设置为向左浮动时才位于第一个 div 的旁边？

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

编辑:

好的。首先感谢您的回答。我遇到的问题是基于我确实将第一个和第二个 div 的宽度设置为相同的值，因此第二个的内容不能围绕第一个 float 。综上所述，我想知 Prop 有 float 属性集的元素被放置在页面流中并且不占用任何空间是很重要的。其次，应该记住只有内容可以流动，而不是实际的 div。

Answer 1

A <div>是一个 100% 宽的 block 级元素，当它在正常内容流中时前后有一个换行符。

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

So why does the second div only position next to the first one when its width is set or its own float property is set to float left?

float <div>仅当有足够的空间将它们并排放置时，它们才会始终并排出现。否则下浮<div>将换行。这是因为 float <div>的在内容流之外并且defined to behave this way in the spec .

但是，您在设置第二个宽度(非 float )<div> 时会发生什么的问题中做出了一些不正确的假设。 .

第二个<div> , 本身总是在 float 的 <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

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

• 第二个<div>尽管第二个 <div> 的宽度总是从屏幕的左边缘开始.

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

• 第二个的实际内容<div>围绕(在其右侧) float 的第一个 <div> 流动只有在其容器内有足够空间使其能够围绕 float <div> 流动的地方.否则，it appears as if it's starting a new line where really only its content is continuing to flow around the bottom float 的 <div> .

W3C Spec: 9 Visual formatting model, 9.5 Floats

A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the 'clear' property). Content flows down the right side of a left-floated box and down the left side of a right-floated box. The following is an introduction to float positioning and content flow; the exact rules governing float behavior are given in the description of the 'float' property.

A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there is a line box, the outer top of the floated box is aligned with the top of the current line box.

If there is not enough horizontal room for the float, it is shifted downward until either it fits or there are no more floats present.

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.

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

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