Question

以下是能够清楚说明问题的最少量代码：

<html>
<body>
    <div style="float: left; width: 200px;">One</div>
    <div style="float: left; width: 200px;">Two</div>
    <div style="background-color: #f0f;">Three</div>
</body>
</html>

前2个div应该是2个左列。第3个应该占用页面的其余部分。最后，我将添加隐藏选项并显示左侧的2列。

但是，为什么紫色一直延伸到浏览器的左边缘？我试图从“三”这个词开始。

Answer 1

你也需要'浮动'第三列。然后在它之后添加一个清除块。

Answer 2

W3C见Block formatting contexts：

在块格式化上下文中，每个框的左外边缘触及包含块的左边缘（从右到左格式化，右边缘触摸）。即使存在浮动也是如此（尽管盒子的线框可能因浮动而缩小），除非盒子建立新的块格式化上下文（在这种情况下盒子本身可能因浮动而变窄）。 p>

您可以通过强制创建新的阻止格式化上下文来避免这种情况：

<div style="background-color: #f0f; overflow: hidden">Three</div>

如果overflow: hidden不是你的选项（弹出窗口等），这是另一种技巧：

<div class="has-columns">
    <div class="column first">...</div>
    <div class="column second">...</div>
    <div class="column third">...</div>
</div>

.has-columns {
    padding-left: 400px; /* padding reserved for floats */
}

.column.first {
    width: 180px;
    margin-left: -400px;
    float: left;
}

.column.second {
    width: 180px;
    margin-left: -200px;
    float: left;
}

我不得不承认，花车的行为有时会令人困惑。

Answer 3

根据第一列和第二列消失时您想要发生的事情，您有几个选择：

1）如果您希望第3列展开并填充所有剩余空间，只需将overflow: hidden;添加到第三个div的样式中。它会像你期望的那样在两个浮动的div旁边流动。

2）如果您希望第三列保持其大小和形状，无论第1列和第2列发生什么，请将其浮动到右侧，设置宽度如float: right; width: 200px;，它将不再是受其他两个影响，但在容器的右边缘保持200px。

CSS 3列，为什么第三列接管另外2列？

3 个答案: