Question

我最近开始学习css，当我学习浮动时，我遇到了一些问题。

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

浮点CSS属性指定一个元素应该从正常流中取出并且＆gt;沿着容器的左侧或右侧放置，其中文本和内联元素将围绕它进行环绕。

但我只是想知道，如果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重叠，这是一个浮动元素？我无法弄清楚浏览器如何处理这个问题。如果浮动元素取自普通文档流，它可以解释这种行为，但这是事实。所以我不知道它。

Answer 1

这可能会有所帮助。你应该添加＆＃34; float：left;＆＃34;具有类＆＃34;右＆＃34;的div的属性。或者如果你删除＆＃34;宽度＆＃34;和＆＃34;身高＆＃34;两个div的属性，你可以看到差异。

Answer 2

无论你从文档中引用了什么：

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

解释了这种行为。

输出是右div与左div重叠

<div>是一个块元素，因此它不会包裹浮动元素。
浮动的div 从正常流中取出，因此重叠了 div.right。

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

enter image description here

JSFiddle

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

没有。 <p>和<h1>也是<div>之类的块元素，因此这不是预期的行为。预期的行为是它们应该与div .right完全相同。发生了什么事。

这里需要注意的关键是你可能没有直接在.right内找到任何文字，所以你认为<div>不是包装，而是<p>和{{ 1}}正在包装，因为你在里面有文字包装：

元素本身并没有环绕，（你只是认为它是）只有它们里面的文字环绕着浮动元素，因为你已经指定了<h1>，没有足够的空间让文本width:140px坐在浮动的div旁边，因此它会分解为下一行 - 这是预期的行为。

如果你直接在right div中添加一些文本，它会发生同样的事情：它会包裹，但这并不意味着元素本身就是包装：

.right元素与浮动div重叠，仅文本和内联元素围绕它，这是文档中明确提到的

如果指定了足够的宽度，则它将在浮动div

旁边对齐

enter image description here

JSFiddle

我在这里看不到任何意外的事情。

旁注：＆＃34;因为有人告诉我浮动元素不会从正常的文档流程中获取＆＃34; - 我不会相信那些制作浏览器的人提供文件的人

浏览器布局如何将div与浮动div相邻

2 个答案: