包装你的浮动<div>s在容器<div>，使用这个跨浏览器的最小宽度hack:

.minwidth { min-width:100px; width: auto !important; width: 100px; }

您可能还需要设置“overflow”，但也可能不需要。

这很有效，因为:

important声明和min-width结合在一起，使得在IE7+中所有内容都保持在同一行 IE6没有实现min-width，但它有一个bug, width: 100px会覆盖!important声明，导致容器宽度为100px。

我解决这个问题的方法是使用一些jQuery。我这样做的原因是因为A和B是宽度的百分比。

HTML:

<div class="floatNoWrap">
    <div id="A" style="float: left;">
        Content A
    </div>
    <div id="B" style="float: left;">
        Content B
    </div>
    <div style="clear: both;"></div>
</div>

CSS:

.floatNoWrap
{
    width: 100%;
    height: 100%;
}

jQuery:

$("[class~='floatNoWrap']").each(function () {
    $(this).css("width", $(this).outerWidth());
});

解决方案1: 显示:table-cell(不广泛支持) 解决方案2: 表 (我讨厌黑客。)

你确定浮动块级元素是这个问题的最佳解决方案吗?

在我的经验中，经常遇到CSS困难，结果证明我看不到做我想做的事情的方法的原因是我陷入了关于我的标记的隧道视野(思考“我如何让这些元素做到这一点?”)而不是回头看看我到底需要实现什么，可能会稍微重做我的html来促进它。

我建议使用表格来解决这个问题。我有一个类似的问题，只要表格只是用来显示一些数据，而不是主页的布局，这是好的。

将这一行添加到浮动元素选择器中

.floated {
    float: left;
    ...
    box-sizing: border-box;
}

它将防止填充和边框添加到width，所以元素始终保持在行，即使你有eg。三个元素宽度为33.33333%