1

简短版本：为什么overflow:auto导致div左侧浮动的右侧div不将其文本环绕在左侧浮动div？（奖励：这是实现列效果的可接受方式吗？）

长版...

我有两个div我希望彼此相邻并显示为列的 s。div左边的有一个特定的宽度和高度。而且div左边的比div右边的短。但是，我不希望右侧的文本在div左侧 div 下换行。

这是我的第一次尝试...

<div>
    <div style="border:1px solid grey;
        width:100px;
        height:100px;
        float:left;">
        Div on the left.
    </div>
    <div>
        Imagine lots and lots of text here...
    </div>
    <div style="clear:both"/>
</div>

...我知道右边的文字div会包裹在左边div。它确实做到了。

然后我想起了我创建的具有列效果的页面。我从不知道在哪里复制并粘贴了它。它所做的只是分配overflow:auto到div右侧。看起来像这样...

<div>
    <div style="border:1px solid grey;
        width:100px;
        height:100px;
        float:left;">
        Div on the left.
    </div>
    <div style="overflow:auto">
        Imagine lots and lots of text here...
    </div>
    <div style="clear:both"/>
</div>

瞧，右边div的文字不再包裹在第一个（左）下div！第二个（右）div显示为一列。

所以，我阅读了我能找到的所有内容，但overflow:auto没有提到为什么我应该看到这种行为。谁能给我解释一下？

另外，这是实现列效果的可接受方式吗？

4

4 回答 4

1

为了让 div 彼此相邻，它们都需要一个浮点数并适合周围的 div。

例子：

<div style="width:200px;">
  <div style="width:100px; float:left;">
      content
  </div>
  <div style="width:100px; float:left;">
      content
  </div>
</div>

如果您希望大纲 div 与 div 的最大 div 位置一起增长overflow:hidden;。如果该 div 没有高度，那么它将与大 div 一起缩放。

预览：http: //jsfiddle.net/WzVBE/

于 2012-12-11T07:56:11.030 回答
1

float:left从第一个 div 中删除。

<div>
    <div style="border:1px solid grey; width:100px; height:100px;">
        Div on the left.
    </div>
    <div style="overflow:auto;  ">
        Imagine lots and lots of text here...
    </div>
    <div style="clear:both"/>
</div>​

演示

于 2012-12-11T07:59:30.557 回答
1

你可以试试这个

<div style="width:800px; background-color:#CCC">
    <div style="width:300px; height:100px; float:left; background-color:#CCC">
        Div on the left.
    </div>
    <div style="height:100px; float:left; width:500px; background-color:#999">
        Imagine lots and lots of text here...
    </div>
    <div style="clear:both"/>
</div>
于 2012-12-11T08:00:20.573 回答
1

overflow: auto（或除此之外的任何内容visible）会导致您的第二个div创建新的块格式化上下文。这意味着其中的文本div现在处于其自己的格式化上下文中，而不是与您的第一个左浮动div（这是两个 divs 的包含块）共享相同的文本，因此不再允许它围绕第一个流动div.

浮点数也生成自己的 BFC，但这与手头的问题并不完全相关。但是，它确实也可以防止回流，从而实现列效果，如其他答案所示。

这是创建列效果的可接受方式吗？我不知道，但它确实看起来非常规。div出于上述原因，您也可以只浮动第二个（尽管即便如此，为了支持即将推出的真正布局模式，如 flexbox 和网格，现在现在被视为浏览器兼容性黑客，但这是我们所拥有的最好的暂且）。

请记住，内联内容旨在能够自然地围绕浮动内容流动；参见CSS2.1, §9.5 浮点数。

还要记住， 的目的是overflow控制大小有限的盒子中的内容溢出。它导致一个盒子创建一个新的 BFC，从而影响浮动，这只是一个副作用，其原因将在此处探讨。这是一个冗长的阅读，但它包含一些关于防止回流的内容，为了便于参考，我将在此处引用：

因此，这种变化是在 CSS2.1 中引起的，记录在这里。现在，如果您将一个overflow值应用visible到第二个盒子之外，浏览器所做的就是将整个盒子推到一边为浮动让路，因为盒子现在创建了一个新的块格式化上下文来包围它的内容，而不是四处流动浮子。例如，这是它的样子overflow: auto：

注意没有间隙；如果第二个盒子有clear: left，或者clear: both它会被推下，而不是推到一边，不管它是否建立了自己的BFC。

顺便说一句，是的，这意味着div如果您想始终清除第一个div.

于 2012-12-11T08:24:45.293 回答