div我有包装两列布局的古老问题。我的侧边栏是浮动的，所以我的容器div无法包装内容和侧边栏。

似乎有很多方法可以修复 Firefox 中的明显错误：

• <br clear="all"/>
• overflow:auto
• overflow:hidden

在我的情况下，唯一似乎工作正常的是<br clear="all"/>解决方案，它有点邋遢。overflow:auto给了我讨厌的滚动条，而且overflow:hidden肯定有副作用。此外，由于其不正确的行为，IE7 显然不应该遇到这个问题，但在我的情况下，它的问题与 Firefox 相同。

我们目前可用的哪种方法最可靠？

尽管像<div>s 这样的元素通常会增长以适应其内容，但使用该float属性可能会给 CSS 新手带来一个令人吃惊的问题：如果浮动元素有非浮动的父元素，则父元素会崩溃。

例如：

此示例中的父 div不会扩展以包含其浮动子级 - 它似乎具有height: 0.

你怎么解决这个问题？

我想在这里创建一个详尽的解决方案列表。如果您知道跨浏览器兼容性问题，请指出。

解决方案 1

浮动父级。

优点：语义代码。
缺点：您可能并不总是希望父级浮动。即使你这样做了，你会浮动父母的父母，等等吗？你必须浮动每个祖先元素吗？

解决方案 2

给父母一个明确的高度。

优点：语义代码。
缺点：不灵活 - 如果内容更改或浏览器调整大小，布局将中断。

解决方案 3

在父元素内附加一个“spacer”元素，如下所示：

优点：代码简单。
缺点：不是语义；间隔 div 仅作为布局技巧存在。

解决方案 4

将父级设置为overflow: auto。

优点：不需要额外的 div。
缺点：似乎是一种黑客行为 - 这不是该overflow物业的既定目的。

注释？其他建议？

我正在使用yaml进行布局，并使用著名的 clearfix css来确保带有浮动的容器得到扩展。

Firefox 3、IE6、IE7、IE8、Opera 9 和 Google Chrome 一切正常，但我对 Firefox 1、Firefox 2 和 SeaMonkey 有问题。问题是 clearfix 容器扩展太多，正如您在网站上看到的那样：

http://www.slagalica.tv/game/mojbroj

以下是Firefox 2和Firefox 3渲染的屏幕截图。

更新： BrowserShots.org 上的截图

不幸的是，统计数据显示超过 10% 的访问者使用的是 FF2，所以我不能简单地忽略这个问题。我尝试删除或调整 clearfix CSS 的某些部分，但无论我做什么，计时器 DIV（绿色）与页面的其余部分有很大的距离。

有谁知道如何解决这个问题？

更新2：我终于放弃并放置了TABLE标签并在几分钟内解决了这个问题。因此，不要尝试查看 HTML 源代码 - 问题不再明显。

如今，清除浮动内容的现代方法是什么？

有一种“最近的”现代方式在父元素上添加“.clearfix”来清除包含的浮动，这会很好用。事实上，这是我最喜欢的方法，并且仍然在我接触的任何网站上使用它。它使每个浏览器都能正确呈现。

然而，我知道这是一种 hack，我最近在 google 上搜索发现很多前端开发人员也有同样的感受，并且想要一个更真实的解决方案。我发现的结果并不是很好。有一些解决方案，但它们只适用于 IE7+，有时在 Opera 上有些问题。

无论如何，我只是想知道这些天清除花车的最佳方法是什么？

它是标准的浮动问题。您在父容器 div 中有一堆浮动元素。由于孩子是浮动的，因此父母不会扩展到包括所有孩子。

我知道 clearfix 解决方案以及将父容器 div 上的溢出属性设置为“自动”或“隐藏”。http://www.quirksmode.org/css/clearing.html 对我来说，设置溢出方法似乎更好，因为它只是一个属性。我想了解的是 clearfix 方法何时比这种方法具有优势，因为我看到它被非常频繁地使用。

PS我不关心IE6。

为什么以下代码在 FireFox 3.6 中不能正常工作？我已经在 IE7、IE8 和 Chrome 中进行了测试，没有任何问题。

问题：第一个块悬停链接（表格的第 3 行）未应用与其下方相同的样式/效果。

注意：我正在尝试创建自己的表格框架。这个项目是我为了更多地了解 CSS 而做的事情。在开始之前，我以为我对 CSS 了解很多。然而，令我惊讶的是，我错了。谁知道？继续... 作为旁注，我不想花时间支持 IE6。因此，如果您看到与 IE6 相关的问题，请不要浪费时间告诉您。另请注意，当此问题是完整 CSS/HTML 的精简/基本框架时，会列出以下样式脚本和 HTML。对我的帮助应该足够了。

CSS：

HTML：

PS：谢谢你的助手，如果你选择帮助。

我知道我的网站在 FF、Safari 和 Chrome 上是完美的，但在 IE8 上却是完美的，这并不是一个新概念。话虽如此，切入正题。这是我正在为囊性纤维化患者的社交网络开发的主页。

http://www.cysticlife.org/Home.php

如果可以，请在 FF、Safari 和 Chrome 中查看，然后在 IE8 中查看问题。我假设它是一个定位问题，因为一些图像没有显示但在那里，并且我的一些 j-query 被禁用。我没有 IE8，所以我很难解决这个问题。我有一个 clearfix 修复，我的印象是 IE8 已经解决了 clearfix 问题。

如果您知道这可能是什么并想提供帮助，请告诉我您希望我在此处放置什么代码以帮助解决问题。

提前非常感谢。

我有以下标记：

以及以下样式：

我使用以下 jQuery 交换视图：

当我将view1内容换成view2内容时，页脚保持在原来的位置，悬停在新内容的中间上方。如果我将鼠标悬停在页脚内容上，它会跳下到位。如果我随后将内容恢复为view1，页脚再次停留在原来的位置view2，远低于container.

我可以应用哪些样式来使 IE 适当地重新定位页脚？我以各种组合尝试了以下所有方法：

• 适用clearfix于#container
• 适用clearfix于#footer
• 适用height: auto于#container
• 适用height: 30px于#footer input
• 适用widgth: 100px于#footer input

我正在为侧边栏的高度而苦苦挣扎。

我的容器现在显示正确的高度（内部内容的高度），但我的侧边栏应该使用该高度的 100% 仍然没有出现。

我已经实施了以下建议之一（http://www.quirksmode.org/css/clearing.html），但侧边栏仍然没有出现。

我相信这对您来说是一个简单的专业人士，任何提示都表示赞赏！

谢谢，

汤姆

这是我的代码：http: //jsfiddle.net/tomperkins/wy52B/

请注意此处提供的此 clearfix 解决方案。

为什么要为 HTML[xmlns] 定义单独的样式？

这是针对特定浏览器设计的 CSS hack 吗？

更新：这是有问题的代码，因为在我看来，有些答案显然离题了。

更新2：它已经或多或少地确定它是一个黑客。但我想要一个详细解释它的外部参考。例如，它适用于哪个浏览器，它究竟要解决什么问题？