0

因此，当我注意到一个我不知道其原因的奇怪行为时，我正在检查 css 浮动属性。

这是四个 div 的代码和预览的链接，前两个左右浮动，第三个和前后只是一个普通的 div。

我确实知道第三个 div 会与第二个 div 重叠，但是我不明白为什么第三个 div 的内容会向下移动，它不应该隐藏在第二个 div 后面吗？

PS我知道可以使用第三个div的clear属性来解决这个问题，但是我更关心这种行为背后的原因。

代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
aside, article, section, header, footer, nav {
    display: block;
}
html, body {
    margin: 0;
    padding: 0;
}
html {
    background: #ccc;
}
body {
    width: 600px;
    background: #fff;
    margin: 2em auto 2em;
    font: 100% Arial, Helvetica, sans-serif;
}
div {
    margin-bottom: 1em;
    margin-right: 2em;
    width: 85px;
    height: 50px;
    border: 1px solid #000;
    padding: 25px;
}
/*add styles here*/
.element1 {
    background: rgb(26, 78, 175);
    float:right;
    color:white;
}
.element2 {
    background: rgb(85, 66, 54);
    float:left;
    color:white;
}
.element3 {
    background: rgb(247,120,37);
}
.element4 {
    background: rgb(211, 206, 61);
}

?
</style>
</head>
<body>
    <div class="element1">Element 1 floated right</div>
    <div class="element2">Element 2 floated left</div>
    <div class="element3">Element 3 normal flow</div>
    <div class="element4">Element 4 normal flow</div>
</body>
</html>
4

3 回答 3

2

您需要清除浮动，如果不是该元素正在向下推所有其他元素

   <style>
    .clear {
        clear:both;
    }  
    </style>

    <div class="element1">Element 1 floated right</div>
    <div class="element2">Element 2 floated left</div>
    <p class='clear'></p> <!-- Usualy I use a div but you slyle all !-->
    <div class="element3">Element 3 normal flow</div>
    <div class="element4">Element 4 normal flow</div>
于 2012-09-16T20:47:52.443 回答
1

实际上，当我们使用浮动元素时，我们应该始终清除它们，否则其他元素将重叠到浮动元素中，因为在浮动元素之后它们没有被清除，就像您的示例中发生的那样，所以我清除了您的.element3类。

.element3 {
    background: rgb(247,120,37);
    clear:both;
}

看演示：- http://jsfiddle.net/ZpQuu/6/

于 2012-09-17T05:21:39.883 回答
0

我在本文档中找到了我的问题的答案。

引用文档：

由于浮动不在流中，因此在浮动框之前和之后创建的非定位块框垂直流动，就好像浮动不存在一样。但是，在浮动旁边创建的线框会缩短，以便为浮动框腾出空间。浮动框之前的当前行中的任何内容都会在浮动另一侧的第一个可用行中重排。

所以基本上文档所说的是，浮动元素可以与添加到文档正常流程中的元素的 Box 模型重叠，但不能重叠它们的内容；换句话说，重叠元素的内容被限制在非重叠空间中。

PS到目前为止，我已经抽象了浮动行为：

Element1：浮动元素

Element2：非定位元素

1-绘制 Element2 的盒子模型。

2-绘制 Element1 的盒子模型及其内容。

3-如果 Element2 仍有非重叠空间，则开始用其内容填充它。

4-如果空间无法容纳全部内容，请在 Element2 盒子模型下开始附加它们。

希望这会有所帮助。

顺便说一句，感谢所有为这个问题做出贡献的人并 +1。

于 2012-09-17T06:34:37.610 回答