DIV不随float属性设置前面的DIV浮动到左

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

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

编辑：

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

Answer 1

A <div>是一个块级元素，其宽度为100％，并且在&之前在正常内容流中之后具有换行符。

从技术上讲，当你飘起了<div>，你正在做的元素出来的正常流动，使其不再具有&前一后断行，也是其他网页内容围绕它流动。

那么，为什么第二个div只有旁边的位置第一个当 将其宽度设置或自己的float属性设置为左浮动？

浮动的<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>的NCE ...

• 第二<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 的定位和内容流程的介绍;关于浮动行为的确切规则 在“浮动”属性的描述中给出。

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

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

由于浮动不在流动中，所以在浮动框垂直流动前后，非定位块框创建 ，就好像浮动不存在 一样。但是，为了腾出浮标的边距框 的空间，必要时缩短了浮动的 旁边创建的当前和随后的线框。

而且这里有一大堆的例子...

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

Answer 2

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

我不知道你想在这里实现什么，但如果你想#first浮动，并#second到不能浮动，规则你会希望添加到#first为：clear:both

但，这很愚蠢，如果你想堆叠它们，你可能会完全删除浮动属性。

Answer 3

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

如果你浮动两个div，它也可以工作的原因是浮动元素的行为更像是行内块元素，这意味着他们只会将内容所需的空间放在里面。底线是，如果你想让这两个div彼此相邻，你应该只是漂浮他们两个。

Answer 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); } 

播放与RGBA（）值的α值（即最后一个参数，它的范围可以从0到1）的背景的-DIV #first的颜色，你会发现DIV＃second实际上始终低于DIV＃