Question

假设我的页面中有三个<div>：

<div id="left" class="test" style="float:left;"></div>
<div id="right" class="test" style="float:right;"></div>
<div id="footer">footer</div>

用这个css：

.test{  background:black;height:200px;width:200px;}
#footer{    background:yellow;margin:20px 0 0 0;}

我想要的是：

让“#left”向左浮动
让“#right”向右浮动
不改变“#footer”，只需将其设置为margin: 20px;

结果如下：

enter image description here

但我想知道为什么浮动的div也与#footer具有相同的余量。它们是浮动的，因此它们独立于其他元素，为什么#footer会影响它们？

Answer 1

以及页脚上的clear:both，只需在元素周围添加一个容器“wrapper”div就可以阻止这种情况发生 - example

实际上在页脚上添加clear: both;也不会在浮动和页脚之间给出20px的间隙，你实际上需要将20px底部边距添加到浮动 - 原因都是链接的..到clearance or non clearance，它与Collapsing Margins

的互动

为什么？

你说你想知道为什么会这样，在你的OP场景中，这是因为折叠边距。

原始示例中没有涉及许可，所以是移除了浮点数，因此页脚边距仍然相邻，因此与body元素一起折叠，因此body元素是一个获得保证金，然后因为浮动实际上仍在body内，他们也获得了保证金。

正如我上面提到的，创建一个包装器div以“包含”浮动停止发生这种情况，因为崩溃的规则也是如此。但是，您选择使用overflow:hidden包含浮点数，或者通过浮动“包装器”来停止此交互，因为..来自折叠边距的部分：

元素的垂直边距建立新的块格式上下文（例如浮点数和元素 '溢出'而不是'可见'） 不要崩溃与他们的流入孩子。

你看到两个属性，浮动和'溢出而不是可见'是“包含浮动的孩子”的手段 - 实际上他们正在建立一个新的块格式化上下文，但很容易说大多数人都知道它“包含漂浮“;）

现在，一旦你有了这个，那就修复了你的第一位，但是如果你决定在页脚上引入clear:both，现代浏览器将不在浮点数之间放置20px的边距页脚..这实际上是正确的..来自clear属性（我的粗体）的部分：

然后将间隙量设置为   更大的：



即使使用，也可以将块的边缘设置为   最低的底部外缘   要清除的浮动。



将块的顶部边框边缘放置所需的量   它的假设立场。

为了将页脚的上边缘放置在浮动下方（在您的示例中），浏览器必须引入200px的清除，这远远超过20px，因此它遵循规则1。页脚上的上边距为220px，边距将大于所需的任何间隙，因此它将遵循规则2.

所以，如果你真的希望页脚在浮动物下方20px，无论它们的高度是多少，你都会将20px作为底部边缘放在两个浮子上，所以它[页脚]会清除，通过间隙规则1，具有所需间隙/边距的浮标，无论哪个浮动时间最长。

PS：不要在IE7或以下测试以上内容 - 我希望它不会太无聊;）

Answer 2

将clear: both添加到#footer CSS。这应该使页脚渲染到浮动div下面，并带有你想要的边距。

Answer 3

试试这个，这可以解决您的问题：

<div id="right" class="test" style="float:right;"></div>
<div id="left" class="test"></div>
<div id="footer">footer</div>

CSS保持不变。

Answer 4

我在找到这个有两个方框的页面之前做了一个测试，其中右方浮动的一个受到左边一个（后面跟着它）的影响：http://jsfiddle.net/4r75s/

防止父div在仅包含浮动内容时崩溃的溢出技巧似乎在这里工作，即将溢出设置为隐藏，自动或滚动。我将它们包装在一个包含div中，然后就可以了：http://jsfiddle.net/4r75s/1/

#container {
    overflow: hidden;
}

为什么这个块div会影响两个浮动的div？

4 个答案:

为什么？