div不沿着前面的div浮动，float属性设置为left [英] div not floating along the preceding div with float property set to left
问题描述
以下CSS规则解释了以下sceanrio：
Which CSS rules explain the following sceanrio:
假设我有以下HTML CSS片段
Assuming I have the following HTML CSS snippets
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的宽度设置或者它自己的float属性设置为float left时，第二个div只位于第一个div的旁边？
What I am wondering about is, why the second div floats next to the first div, only when its width is set. If I replace the second div with a paragraph, it also floats next the first 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?
顺便说一句。我不是想在这里实现任何类型的布局。我只是想了解div元素和其他块元素的这些特定行为。
By the way. I am not trying to achieve any sort of layout here. I am just trying to understand these particular behaviours of the div element and other block elements.
编辑：
好。首先感谢您的答案。我的问题是基于这样的事实，我设置第一和第二个div的宽度为相同的值，使第二个的内容不能浮动在第一个。总而言之，我想知道具有float属性集的元素被放入页面流并且不占用任何空间是很重要的。其次，应该记住只有内容可以流动，而不是实际的div。
OK. First of all thanks for the answers. The problem I had was based on the fact that I did set the width of the first and the second div to the same value, so that the content of the second could not float around the first one. To sum things up, I guess it is important to know that elements with the float property set are taken put of the page flow and dont take up any space. Secondly one should remember only the content can flow around, not the actual div.
推荐答案
A div> 是一个块级元素，宽度为100％，在&
A <div> is a block level element which is 100% wide and has a line break before & after when it's within the normal content flow.
技术上，当你浮动一个< div> 使得元件脱离正常流动，使得元件在之前和之后不再具有断线。
Technically, when you float a <div>, you're taking the element out of the normal flow so it no longer has a line-break before & after and also the other page content flows around it.
因此，为什么第二个div仅位于第一个div的旁边，当
设置其宽度或将其自身的float属性设置为float left？
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?
浮动< div& 只有在有足够空间来并排包含它们时才会并排显示。否则，下一个浮动的< div> 将换行换行。这是因为浮动的< div> 不在内容流和
Floated <div>'s will always appear side-by-side only if there's enough room to contain them side-by-side. Otherwise, the next floated <div> will wrap to a new line. This is because floated <div>'s are outside the content flow and defined to behave this way in the spec.
但是，你在你的问题中做了一些不正确的假设关于当您设置第二个（非浮动）< div> 的宽度时会发生什么。
However, you've made some incorrect assumptions in your question about what happens when you set the width of the second (non-floated) <div>.
第二< div> 本身总是在下面（意味着在后面）浮动的< div> 然而，第二< div> 的内容总是在浮动的< div> （见下面的三个例子）
The second <div>, itself, is always underneath (meaning behind) the floated <div>. Whereas, the "content" of the second <div> always flows around the floated <div>. (see three examples below)
所以无论你是否设置第二个 div 的宽度，仍然流动左边浮动的 div ，你可以在这里看到三个例子。 （为了说明的目的，第一个< div> 是红色的50％不透明度，第二个是蓝色的绿色边框。）
So whether or not you set the width of the second div, its content will still flow around the left floated div as you can see illustrated here in three examples. (For illustration purposes, the first <div> is red with 50% opacity and the second is blue with a thick green border.)
Fiddle with second div wider than first
从上面的三个例子可以看出，尽管存在浮动的第一个< div> ...
As you can see from all three examples above, despite the existence of the floated first <div>...
- p>第二个
< div>总是从屏幕的左边缘开始，尽管第二个的宽度< div>。
the second
<div>always starts on the left edge of the screen despite the width of the second<div>.
第二个< div> 始终从屏幕的顶部因为第二个< div> 之上没有其他页面流内容。
the second <div> always starts on the top edge of the screen because there's no other page flow content above the second <div>.
第二个< div> 流向（右侧）浮动的第一个< div> 在其容器内有足够的空间以允许其围绕浮动的< div> 流动。否则，它出现，如果它开始一个新行，真的只有其内容继续< div> 。
the actual content of the second <div> flows around (to the right of) the floated first <div> only where there is enough room inside its container to allow it to flow around the floated <div>. Otherwise, it appears as if it's starting a new line where really only its content is continuing to flow around the bottom of the floated <div>.
float是一个在当前
行上向左或向右移动的框。浮动（或浮动或
浮动框）最有趣的特性是内容可能沿着它的边流动（或者通过'clear'属性禁止
这样做）。内容向下流
在左边浮动框的右边，在
右边浮动框的左边。以下是float
定位和内容流的介绍;浮动行为的确切规则
在float属性的描述中给出。
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.
浮动框向左或向右移动，直到其外edge
触及包含块边缘或另一个float的外边缘。
如果有一个行框，浮动框的外顶部对齐
与当前行框的顶部。
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.
这里有一大堆例子...
And here are a whole bunch of examples...
W3C规格：9视觉格式化模型，9.8正常流程，浮动和绝对定位的比较
这篇关于div不沿着前面的div浮动，float属性设置为left的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
