问题
Which CSS rules explain the following sceanrio:
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
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?
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.
EDIT:
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.
回答1:
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.
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.
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?
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.
However, you've made some incorrect assumptions in your question about what happens when you set the width of the second (non-floated) <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)
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
Fiddle with no set width (100%) on second div
Fiddle with second div narrower than first
As you can see from all three examples above, despite the existence of the floated first <div>...
the second
<div>always starts on the left edge of the screen despite the width of the second<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>.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>.
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.
And here are a whole bunch of examples...
W3C Spec: 9 Visual formatting model, 9.8 Comparison of normal flow, floats, and absolute positioning
回答2:
What makes you believe the div's are floated next to each other? In reality they are not. It's only that their content shows up next to each other but that's not because DIV #second is to the left of the floated DIV. It doesn't matter if you set the width or not.
What in fact is happening is that the floated DIV #first is floated to the left. Because it's floated, it's taken out of the normal flow. This means that DIV #second is actually on the same place as where DIV #first is appearing. The content of DIV #second though is inline content and inline content always flows around floated elements. Even floated elements that are outside of the container. So DIV #second is underneath DIV #first but the content of DIV #second is floating around DIV #first.
To illustrate that, I've create this CSS:
#first { float: left; background-color: rgba(255,0,0,0.3); }
#second { background-color: rgba(0,255,0,1); }
Play with the alpha value of the RGBA() value (i.e. the last parameter, it can range from 0 to 1) of the background-color of DIV #first and you will see that DIV #second is in fact below DIV #first all the time
回答3:
Unless you clear your floats, the next block level element will float next to the last float by default.
I'm not sure what you're trying to achieve here, but if you want #first to float, and #second to NOT float, the rule you'd want to add to #first is : clear:both
But, that's pretty silly, you might as well just remove the float properties completely if you want to stack them.
回答4:
Block elements take 100% of the width of their parent element, so even if your first div is floated, the second div will take the width of his parent, thus falling on a second line. This is why if you specify a smaller width, it stands next to the first floated div.
The reason why it also works if you float the two divs is that floated element behave a bit more like inline-block elements, wich means they will only take the space needed for the content inside of them.
Bottom line is, if you want these two divs to stand next to each other, you should probably just float the two of them.
来源：https://stackoverflow.com/questions/7946425/div-not-floating-along-the-preceding-div-with-float-property-set-to-left