问题标签 [clearfix]

在我正在处理的布局上（在大多数情况下不是这样），我想不出任何我不希望 div 不包含其浮动子级的实例。所以我在想，而不是为每个需要它的元素（主要是容器 div）添加一个 clearfix 类，为什么不让所有的 div 都像这样被 clearfixed：

这有什么缺点吗？在测试我当前的布局时，我真的看不到任何东西，但也许有一些知识渊博的人比我更了解。

我面临一个奇怪的问题。我正在使用CSS-Tricks上描述的简单 CSS clearfix hack来清除浮动。代码片段：

但是，添加上述代码会导致文本在 Chrome 和 Safari 中不可见。我现在已经在几台设备上对其进行了测试，每次都得到相同的结果，但我不明白为什么这会破坏任何东西。然而，火狐

您可以在此处查看工作版本和在此处查看损坏的版本。如果您检查页面源，唯一的区别是上面的代码片段被注释掉了。

问题截图http://cl.ly/image/3h1s0Q31473Q

我花了一些时间环顾四周，但在其他任何地方都找不到任何提及这个问题的地方。在 Firefox 中一切都很好。

提前致谢，

-扎克

一直在做一个网站来尝试学习更多的 css 和 html。

以为一切顺利，直到我尝试在 IE 中向某人展示它（我使用 ff）

当我加载页面时，页脚似乎在错误的位置，我无法弄清楚为什么这是一个屏幕截图http://www.flickr.com/photos/mattcripps/8300226269/

您可以在此处查看该网站的代码 http://www.deltacars.co.uk/testsite/

任何帮助都会很棒，因为这是在做 mt head in。

clearfix 有问题...在使用时，它将删除我的 div 居中（margin 0 auto）。因此，以此为例，“容器”div 将向左浮动，而不是在“标题”中居中。“某些内容”将是没有定义高度的浮动项目。此时我只能使用 clear = display: block; 明确：两者；高度：0；宽度：100%；在最后的 div 中正确清除它们。

问题是什么？

例子 ：

我有一个由 PHP 动态控制的简单图片库，用于在页面中添加和删除图片缩略图。我遇到的问题是我希望图像彼此相邻对齐，直到该行没有空间并被迫开始另一个。

我已经尝试使用float:leftwhich 工作但包含高度设置为自动调整自身大小以不包含图像的包含主体 div。然后我尝试添加clear:both;修复了body div问题的图像，但现在图像直接位于彼此下方。

我float:left以前在很多情况下都使用过，但包含的 div 具有固定的高度。

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

谢谢大家:)

我很清楚（双关语）实现 clearfix 的两种最佳方式是通过 Nicolas Gallager 的微版本 .cf { *zoom: 1; }，或者使用overflow: hidden.

但是，当没有什么需要修复时，是否应该使用 clearfix 呢？（再次双关语。）

换句话说，如果你有一个类似article或section仅仅出于语义原因的容器——它没有背景或任何视觉效果（如本例中所追求的），但里面有浮动元素——你还应该清除它吗？

我为什么要问？

好吧，显然有些地方出了问题，因为如果您在网络检查器中调出容器，您将不会看到突出显示的容器，例如它只是一个不可见的滑行：

（在Firefox Tilt中，它以 3D 形式可视化网站，当您将网站旋转 90 度时，容器块应该是一个空白区域。）

但这有关系吗？

到目前为止我的推理：

当然，如果您决定将来将容器用于视觉/布局目的，您会发现它的行为不正常，然后您将应用 clearfix hack。但是，还有什么需要考虑的呢？

我只是试图内联CSS来解决这个问题，并在完成后将其移动到我的“样式”文件中。我正在尝试的应该使所有图像和单选按钮内嵌在周围DIV。我不能做的是让他们在高度方面居中。如您所见，我在第一个单选按钮上尝试了 margin-bottom ，但它没有做任何事情。我究竟做错了什么？我可能在某个地方需要一个clearfix吗？

我想在一个容器 div 中制作两个 div，一个向左浮动，一个向右浮动。左侧 div 包含新闻日期、标题和新闻内容，右侧 div 包含一个下拉按钮和框，其中包含与新闻帖子相关的媒体。

这是

问题是newsleft和newsright是浮动的，并且页面内容没有增加它的高度，我不想手动将高度放在CSS文档中：S有没有人可以帮助我？

谢谢，o0 Will Ryan

我有一个非常具体的布局可以用 HTML/CSS 来实现。基本上我有一个文本容器，里面有几个左浮动框。然后我有一个页脚，需要在底部与这个文本容器重叠几个像素。我通过在页脚上使用负上边距并position:relative在文本容器和页脚上设置和 z-index 以使页脚层堆叠在文本容器上方来实现这一点。

它可以在小提琴中得到最好的证明：http: //jsfiddle.net/sW9cu/2/。

问题在于，在 IE9 和 Firefox 18 中，页脚的内容会清除文本框的内容，而在 Chrome 中，页脚的内容会覆盖文本框的内容而没有任何清除。

我基本上需要这在 IE7+、Firefox 和 Chrome 中保持一致，无论哪种方式。不关心哪种方式 - 它可以清除或重叠，但无论浏览器如何，它都需要表现相同。

谁能看到它为什么这样做以及如何纠正它？这可能与我在文本容器上使用的微清除修复有关，但我真的不确定。

感谢任何人的指点 - 这个让我难过！

你能看看我的网页（联系页面），让我知道为什么我仍然在 clearfix 类中遇到这个问题吗？我什至在所有元素上都使用了 clear ，但这种情况仍在发生！和 tghe #bizleft 和 #bizright 没有对齐！

http://ghazalphoto.com/contact/

谢谢