浮动 div 会影响我屏幕中其他 div 的高度答案

【问题标题】：floating div effects the height of other div in my screen浮动 div 会影响我屏幕中其他 div 的高度
【发布时间】：2014-03-11 05:56:15
【问题描述】：

如果不明白我想要达到的目标，我会解释：

我想要一个页面，其中 div 向右浮动，宽度为 250px，而 div 宽度与文档其余部分相同。

在左边的 div 中，你可以看到我还有一些其他的浮动元素，它们的高度是由右边的 div 影响的。您可以看到第一行（红色）的高度与右侧栏的高度对齐，并且与其内容的真实内容无关。

你能告诉我为什么会这样吗？

【问题讨论】：

发生这种情况是因为您使用的是table 显示设置。为什么需要设置为display: table？
@helion3 这是“clearfix/group”类，我用它来解决常见的浮动问题，强制2个元素在同一行...css-tricks.com/snippets/css/clear-fix

【解决方案1】：

我刚刚从上一个答案中更改了内容 div 的 CSS：

.content {
    background: #888;
    padding: 10px;
    position: absolute;
    right: 270px;
    left: 0;
}

你怎么看？

【讨论】：

【解决方案2】：

您提供的 margin-right:270px 比可用空间宽，所以只需删除它。你也应该让内容浮动：左。

.content {
    background: #888;
    padding: 10px;
    float:left;
}

【讨论】：

【解决方案3】：

display: table 不适合用于这样的布局，它更适用于特定的等高情况。

正确浮动 div 而不使用 margin-right 推动左侧 div 将起作用：

.content {
    background: #888;
    padding: 10px;
    float: left;
    width: 250px;
}

【讨论】：