使用 CSS 清除最后一个浮动元素？答案

【问题标题】：Clearing the last floated element using CSS?使用 CSS 清除最后一个浮动元素？
【发布时间】：2011-05-15 11:33:52
【问题描述】：

我在另一个 div 中有一组浮动 div。子 div 的宽度和高度可变——也就是说，它们是使用我无法控制的动态数据填充的。现在有时如果最后一个子 div 具有很大的高度和一堵文字墙，会发生什么情况，因为它被其他 div 强制为一个小宽度。这只发生在 IE 6、7、8 中 - FF3.6 正确处理它 - 它确保巨大的 div 在大宽度的换行符之后开始。

无论如何我可以强制 IE 进入相同的行为吗？

【问题讨论】：

你能尝试重现错误吗？堆叠多个不同高度的花车通常会导致混乱，因此很难准确判断您遇到了什么。如果您发布您的代码，我们可以重现它并解释为什么 IE 显示它的方式。

标签： css internet-explorer css-float

【解决方案1】：

实际上，如果您为浮动 div 指定宽度，那么它将使用该宽度，否则浮动 div 将“收缩包装”到内容。所以你可以试试，或者你可以用这个样式来做那个浮动：

#the-last-div { clear: both; float: left }

如果您希望它单独在页面上显示，您可能希望它浮动，也可能不希望它浮动。

【讨论】：

我不知道哪个 div 最终会成为最后一个 div。每个 div 都有动态内容进入其中。有些 div 可能没有内容。
那么你想为它们指定一个宽度，比如 300px 或类似的东西吗？否则如果右边最后一个浮动的 div 是 60px 是正常的，因为那是整个页面剩下的，如果里面有 300 个字，那么它会显得太高太奇怪了。
你也可以试试min-width，虽然 IE 7 对它的支持有问题：reference.sitepoint.com/css/min-width

【解决方案2】：

对此的唯一解决方案是以下三个之一：指定 clear: both;，指定默认宽度，或者使用 jquery/javascript 动态执行其中一个或两个。只要您让内容决定高度和宽度，您就会遇到问题。

使用 clear:both;在所有 div 上都会将每个浮点数放在自己的行上。这听起来不像你想要的。

指定宽度将是最可预测的。如果没有足够的空间，浏览器将尊重宽度并清除到下一行。

如果您正在动态加载需要特定宽度的内容，那么适当地动态调整包含的 div 宽度应该很简单。如果内容太长，您也许可以检查内容的长度并为接收内容的 div 分配宽度。由于我们没有您的代码，您必须对长度和宽度进行试验才能使其正确。

您正在加载的内容是简单文本还是包含 div 和其他块级元素？它是如何漂浮的？它是浮动的混合：左；和浮动：对； ?还是全部偏向一边？

【讨论】：