Css 浏览器如何在浮动div旁边布局div_Css_Css Float

Css 浏览器如何在浮动div旁边布局div

css

Css 浏览器如何在浮动div旁边布局div,css,css-float,Css,Css Float,我最近开始学习css，当我学习float时，我遇到了一些问题发件人： float-CSS属性指定一个元素应该从正常流中提取，并>放置在其容器的左侧或右侧，文本和内联元素将>环绕该元素但我只是想知道，如果一个div跟随浮动元素呢？所以我写了一个测试，它没有环绕它，它与它重叠，我真的很困惑，因为有人告诉我浮动元素不会从正常的文档流中提取，如果有足够的空间，下一个div将与它左对齐这是html和css，请注意，右边的div不是浮动的，如果它是浮动的，它的行为将符合我的预期，但这不是我的问题 &l

我最近开始学习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>


浮动布局
#包裹{
背景：#00c；
保证金：0自动；
宽度：960像素
}
#标题{
背景：#FF3300；
宽度：100%；
}
#主体{
背景：0立方英尺；
宽度：100%；
溢出：隐藏；
}
#页脚{
背景：#639；
宽度：100%；
}
.左{
宽度：140px；
高度：200px；
背景#1f0；
浮动：左；
}
.对{
宽度：140px；
高度：500px；
背景：绿色；
}
标题
左边
正当
页脚

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

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

这可能会有帮助。应该为类为“right”的div添加“float:left；”属性。或者，如果删除两个div的“width”和“height”属性，则可以看到差异。

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

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

解释了这种行为

输出是右div与左div重叠

是块元素，因此它不会环绕浮动元素
浮动div从正常流中取出，因此与
```
div.right
```
如果您增加
```
。right
```
的宽度，则此选项可见

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

不。

和

也是块元素，就像

一样，因此这不是预期的行为。预期的行为是，它们的行为应该与div

完全相同。这正在发生
这里需要注意的关键是，您可能没有直接在中包含任何文本。对
，因此您认为
没有包装，但是
和
正在包装，因为它们中包含正在包装的文本：
元素本身没有环绕（您只是认为它是）只有它们内部的文本环绕浮动元素，因为您指定了宽度：140px
，所以没有足够的空间让文本右侧
坐在浮动div旁边，所以它会分解到下一行-这是预期的行为
如果您直接在中添加一些文本，也会发生同样的情况。right
div:它将环绕，但这并不意味着元素本身正在环绕：
以上代码的。谢谢TJ。我对它困惑了好几天，继续学习css感到很难过。你的回答让我明白，我一直认为段落或h1有不同的行为，你的回答让我明白它们都是相同的，只是bock元素中的文本将被包装。