Question

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

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

我明白第三个div会被第二个div重叠，但是我不明白的是为什么第三个div的内容被降低了，不应该隐藏在第二个div之后？

P.S我知道可以使用第三个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>

Answer 1

你需要清除浮动，否则元素会推下所有其他元素

   <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>

Answer 2

实际上当我们使用float元素时，我们应该总是清除它们，否则其他元素将重叠到浮动元素中，因为它们在浮动元素之后不会被清除，就像你的例子中那样，所以我清除了你的.element3类。 / p>

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

请参阅演示： - http://jsfiddle.net/ZpQuu/6/

Answer 3

我在this document内找到了我的问题的答案。

从文档中引用：

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

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

P.S。到目前为止，我已经抽象了浮动行为：

元素1：浮动元素

元素2：非定位元素

1-Draw Element2的盒子模型。

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

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

4 - 如果空间无法容纳整个内容，请开始在Element2框模型下附加它们。

希望这会有所帮助。

顺便说一句 ，感谢所有为此问题做出贡献的人以及+1。

CSS浮动属性意外行为

3 个答案: