CSS浮点逻辑 [英] CSS Float Logic

问题描述

小提琴：似乎相关，但它似乎并不解释为什么浮动元素停止在某个位置。

解决方案

以下是与您的问题最相关的链接答案部分：

当你浮动一个块元素时，你要告诉浏览器把它放在前一个浮动对象的旁边，只要容器足够宽（否则它会下降到上一个对象）。

正如笔者提到的，这是一个粗略的简化。规范的 9.5.1节列出了所有精确的规则，但我不会在这里引用整个事情，因为它是一个很长的阅读，只有某些点在这里是相关的。我将引述相关的点，因为我准确地了解你的小提琴发生了什么。

比较你的两个截图。注意已更改位置的两个框，3_2和3_3以及其周围的框，2_4，3_0和3_1。

之前

后

当屏幕变大时，让3_2从2_4旁边的原始位置向上移动到3_1旁边：

7. 左侧有一个左侧悬浮框的左侧悬浮框可能不具有其右边缘在其包含块的右边缘的右边。 （松散：左浮点可能不会伸出在右边缘，除非它已经尽可能地向左）。类似的规则适用于右移元素。

9. 左侧浮动框必须尽可能向左放置，右侧浮动框尽可能向右。

为下一个浮动框占据空间，尽可能向上和尽可能远的左边，遵循与上述相同的规则。因此，3_3浮动，停止只是害羞的3_2，然后它沿水平轴尽可能地漂浮在左侧，停止只是害羞的2_4。请注意，即使看起来3_3应该能够在2_4和3_2之间，但它不会，因为边距必须被尊重（这是上面的外边缘的含义）。

此时，除上述项目＃8和＃9之外，还有以下项目：

2. 如果当前框是左浮点，并且源文档中先前元素生成了任何左浮点框，框，则当前框的左外边缘必须在较早框的右外边缘的右边，或者其顶部必须低于较早框的底部。类似的规则适用于右侧浮动框。

5. 浮动框的外部顶部不能高于源文档中先前元素生成的任何块或浮动框的外顶部。 li>
   

由于3_3太大，它会从第一行浮动块中产生明显的向下突出。这有效地增加了第一线的高度。 3_3之后的所有其他浮动元素必须保持在其自己的行上，并且此第二行浮点数不得与3_3的下边距边缘相交。这主要由项目＃5管理。

A fiddle: http://jsfiddle.net/8wffnn92/

I have created 25 boxes of random width and height, where width = height (as shown)

$(".content").append("<div id='"+count + "_" + iter+"' class='box'><p>"+count + "_" + iter+"</p></div>");
$(".content div:last").width(Math.round((Math.random() * 100) + 50));
$(".content div:last").height($(".content div:last").width());

Each div has the following css:

.box{
    background:#FF0004;
    margin: 10px;
    float:left;
}

I am trying to better understand the float property logic and the reasoning behind the positioning of floating elements when they "stack" on each other. for instance (screenshots taken from fiddle):

What makes 3_3 relocate to the position as shown below when the screen is made bigger?

According to W3Schools:

If you place several floating elements after each other, they will float next to each other if there is room.

So the question is, what does "room" mean and what is the logic which governs the location of floated elements?

The answer to this SO post: CSS Float explanation appears relevant, however it doesn't seem to explain why a floated element stops at a certain location.

解决方案

Here's the part of the linked answer that's most relevant to your question:

When you float a block element, you are telling the browser to position it next to the previous floated object, so long as the container is wide enough (otherwise it will drop below the previous object).

As the author mentions this is a crude simplification. Section 9.5.1 of the spec has a list of all the precise rules, but I'm not going to quote the entire thing here as it is a very long read and only certain points are relevant here. I'll quote the relevant points as I step through exactly what is happening in your fiddle.

Compare your two screenshots. Pay attention to the two boxes that have changed positions, 3_2 and 3_3, as well as their surrounding boxes, 2_4, 3_0 and 3_1.

Before

After

When the screen is made bigger, you make room for 3_2 to move from its original position next to 2_4, upward and next to 3_1:

7. A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block's right edge. (Loosely: a left float may not stick out at the right edge, unless it is already as far to the left as possible.) An analogous rule holds for right-floating elements.

8. A floating box must be placed as high as possible.

9. A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.

This in turn makes room for the next floating box to occupy the space as far up top and as far to the left as possible, following the same rule as above. As a result, 3_3 floats up, stopping just shy of 3_2, then it floats as far to the left as possible along the horizontal axis, stopping just shy of 2_4. Notice that even though it seems like 3_3 should be able to fit between 2_4 and 3_2, it does not, because the margins have to be respected (this is what is meant by "outer edge" above).

At this point, the following items apply, in addition to items #8 and #9 above:

2. If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.

5. The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.

As 3_3 is so large, it creates a noticeable downward protrusion from the first line of floating boxes. This effectively increases the height of the first line. All the other floating elements following 3_3 must remain on their own line, and this second line of floats must not intersect the bottom margin edge of 3_3. This is mostly governed by item #5.

这篇关于CSS浮点逻辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！