浏览器如何将相邻 div 布局到浮动 div答案

【问题标题】：How does browser layout adjacent div to a floating div浏览器如何将相邻 div 布局到浮动 div
【发布时间】：2014-08-24 13:07:38
【问题描述】：

我最近开始学习css，在学习float的时候遇到了一些问题。

来自https://developer.mozilla.org/en-US/docs/Web/CSS/float：

float CSS 属性指定一个元素应该从正常流中取出并>放置在其容器的左侧或右侧，文本和内联元素将>环绕它。

但我只是想知道，如果 div 跟随浮动元素怎么办？所以我写了一个测试，它没有环绕它，它与它重叠，我真的很困惑，因为有人告诉我浮动元素不会从正常的文档流中取出，下一个 div 会向左对齐如果有足够的空间。

这是html和css，注意右边的div不是浮动的，如果是浮动的，它会表现出我的预期，但这不是我的问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Float Layout</title>
    <style type="text/css">
        #wrap {
            background: #00c;
            margin: 0 auto;
            width: 960px
        }

        #header {
            background: #FF3300;
            width: 100%;
        }

        #mainbody {
            background: #0CF;
            width: 100%;
            overflow: hidden;
        }

        #footer {
            background: #639;
            width: 100%;
        }

        .left {
            width: 140px;
            height: 200px;
            background: #1f0;
            float: left;
        }

        .right {
            width: 140px;
            height: 500px;
            background: green;
        }

    </style>
</head>
<body>
<div id="wrap">
    <div id="header">header</div>
    <div id="mainbody">
        <div class="left"><h1>Left</h1></div>
        <div class="right"><h1>Right</h1></div>
    </div>
    <div id="footer">footer</div>
</div>
</body>
</html>

我没有足够的声誉来发布图片。输出是右 div 被左 div 重叠，如果我用段落或 h1 替换右 div，它将环绕左 div 这是预期的行为。

我只是想知道为什么右 div 与作为浮动元素的左 div 重叠？我无法解释浏览器如何处理这个问题。如果浮动元素取自正常的文档流，它可以解释这种行为，但这是事实。所以我对此一无所知。

【问题讨论】：

JSFiddle 上面的代码。

标签： css css-float

【解决方案1】：

您从文档中引用的任何内容：

float CSS 属性指定一个元素应该从正常流中取出并放置在其容器的左侧或右侧，文本和内联元素将环绕它。

解释了这种行为。

输出是右div被左div重叠

<div> 是块元素，因此它不会环绕浮动元素。
浮动的 div 从正常流中取出，因此与 div.right.

如果增加.right 的宽度，则可见。

JSFiddle

如果我用段落或 h1 替换右 div，它将环绕左 div，这是预期的行为。

没有。 <p> 和 <h1> 和 <div> 一样也是块元素，因此这不是预期的行为。预期的行为是它们的行为应该与 div .right 完全相同。正在发生的事情。

这里要注意的关键是您可能没有直接在.right 中包含任何文本，因此您认为<div> 没有换行，但<p> 和<h1> 正在换行，因为您有文本他们正在包装：

元素本身并没有环绕，（你只是认为它是）只有它们里面的文本环绕浮动元素，因为你指定了width:140px，所以还不够文本 right 的空间位于浮动 div 旁边，因此它分解到下一行 - 这是预期的行为。

如果你直接在.right div 中添加一些文本也会发生同样的事情：它会环绕，但这并不意味着元素本身正在环绕：

<block 元素被浮动 div 重叠，只有文本和内联元素环绕它，这是文档中明确提到的

如果你指定了足够的宽度，它会在浮动的 div 旁边对齐

JSFiddle

我没有看到任何出乎意料的地方。

旁注：“因为有人告诉我浮动元素不会从正常的文档流中提取”——我不会相信某些人会超过制作浏览器的人的文档 p>

【讨论】：

谢谢T J。我迷茫了好几天，继续学习css感到很遗憾。你的回答让我很清楚，我总是认为段落或 h1 有不同的行为，你的回答让我清楚他们都是一样的，只是 bock 元素中的文本会换行。

【解决方案2】：

这可能会有所帮助。您应该添加“浮动：左；”具有“正确”类的 div 的属性。或者，如果您删除两个 div 的“宽度”和“高度”属性，您可以看到差异。

【讨论】：