为什么CSS float不改变下面div的宽度？ [英] Why does CSS float not change the width of the following div?

问题描述

根据我的理解 float：left ，它会将后面的元素推向左边，而不是在一个新行。

在下面的例子中，我希望第二个div开始在第一个div的右边，但是你可以在下面的jsfiddle中看到，它仍然跨越整个宽度。

另一方面，内容奇迹般地从它应该的地方开始。 float 规则只浮动内容而不浮动边距？

IMG框悬浮在左侧。随后的内容是
格式化在浮动的右边，从
浮点开始在同一行。由于
float的存在，浮点右边的行框被缩短，但是在浮点之后恢复它们的正常宽度（由P元素建立的包含块的
的宽度）。

因此，如果您给予 .yellow 元素背景，

解决方案

从 CSS level 2.1 spec ：

在正常流程中，表的一个边框，一个块级替换元素或
元素，它建立一个新的块格式化
上下文（例如带有'overflow'而非'visible'的元素）必须
不与同一块格式化
上下文作为元素本身。

因此，如果添加溢出属性的值不是可见到 .yellow 防止div与浮动元素重叠：

这里的示例

  .yellow {
 overflow：hidden; 
} 
  

---

重叠以下内容的长度足够大可以正常继续的情况

如果默认限制，内容不会继续在浮动元素下。

As I understand float:left, it will push the subsequent element to its left rather than on a new line.

In the following example I would expect that the second div begins to the right of the first div, but as you can see in the jsfiddle below, it still spans the whole width.

The content on the other hand magically begins where it's supposed to. Does the float rule only float the content but not the margins?

Example here

<div class="inline">
    first line<br>
    second line<br>
    third line<br>
</div>

<div class="yellow" >floated div</div>

.inline {
    float:left;
}

.yellow {
    background-color:yellow;
}

EDIT: I would expect that the code above looks something like this but without the explicit need to use margins.

解决方案

This is an expected behavior of float positioning.

When an element is floated to the left (in your case the .inline div), the following content flows down the right side of that element, line boxes get shortened BUT the width of the containing block which is established by the following element (in your case the .yellow div) is reserved.

This is documented in the spec:

9.5 Floats

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.

Which means block level elements (such as <div>, <p>, ...)—That are not positioned—ignore the float, whereas line boxes flow along its side.

An example given by W3C:

^[D]

The IMG box is floated to the left. The content that follows is formatted to the right of the float, starting on the same line as the float. The line boxes to the right of the float are shortened due to the float's presence, but resume their "normal" width (that of the containing block established by the P element) after the float.

Hence if you give the .yellow element a background, you'll see that it spans the container and continues through the floated element.

The solution

From CSS level 2.1 spec:

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself.

Hence if you add an overflow property with value other than visible to the .yellow div, it prevents the div from overlapping the floated element:

EXAMPLE HERE

.yellow {
    overflow: hidden;
}

---

Overlapping makes sense specially in situations where the length of the following content is large enough to continue normally after the floated element.

If it was restricted by default, the content wouldn't be continued under the floated element.

这篇关于为什么CSS float不改变下面div的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！