问题标签 [clearfix]

我正在研究一个简单的布局，它需要一个页眉、页脚和主要内容。但是，有些事情让我有些烦恼。如果我在我的标题http://www.reversl.net/before/下包含一个图像，那么一切都恰好位于我想要的位置。但是，如果我删除图像，我的标题会从页面顶部给自己留出一个边距，如下所示http://www.reversl.net/after/我猜它与我的浮动标题有关，并且它的浮动内容没有被清除. 但是我已经包含了 clearfix hack，这似乎并没有改变事情。有任何想法吗？

好的，我正在为我的一个客户重新制作一个网站，多年来，就 CSS 而言，我一直在做一些过时的事情。我已经阅读了一些东西，发现了一种称为 clearfix 的方法，自从我读到它以来，我一直想试一试。

现在我试了一下，我发现我的元素居中方法不起作用

通常我会将它居中，margin:0 auto;但实施 clearfix 这不再有效。所以现在我正在寻找一种应用相同逻辑但在等式中保留 clearfix 的方法。我发现了一些可以在较新的浏览器上运行的东西，但不确定它们是否适用于较旧的浏览器，并且我正在努力使其尽可能地保持跨浏览器兼容，而不会为了做其他事情而做一些事情。这就是我重新制作网站的众多原因之一，我希望从头开始为他们提供一个漂亮的新代码库，这是合规的。

供参考，这是我使用的 clearfix 方法 http://www.webtoolkit.info/css-clearfix.html

*编辑显示代码*

如前所述，主包含元素在应用 clearfix 类后失去其“居中”位置。根据我的理解，clearfix 的全部意义在于它采用其中具有浮动元素的父元素是让元素将自身调整到其中最大浮动元素的高度。现在，我相信它应该在哪里起作用，margin:0 auto; 通过提供的类在同一元素上，否则将被忽略

我创建了一个 html，可以在http://temp87.web44.net/temp.html找到。我面临的问题是页脚后页面底部有一条灰色条，并且页面没有占据浏览器的 100%。

导致问题的CSS..

问题2：我也想要高度

根据屏幕分辨率自动适配。现在计算的高度总是 619px，在大屏幕上，整个页面只占屏幕的 75%。

WP Disqus 官方插件评论和它的社交栏（Like/Dislike/Settings）之间有一个巨大的空白区域，如下截图所示：http: //i.imgur.com/RjRs6.jpg 巧合的是，空白区域结束于右侧边栏结束。正如 Firebug 所示，disqus_thread 或 disq-content 中的某些内容会导致此故障。我尝试删除我的个人 style.css clearfix 代码或仅删除 height:0，但没有任何改变

您可以在我的博客（即http://www.flapane.com/blog/2010/11/rai-rinuncia-ad-acquistare-diritti-champions-league/）的任何帖子上看到它“直播” ，就在两者之间帖子本身和 Disqus 评论。

有什么提示吗？提前致谢

清除一组浮点数最流行的方法是clear:both;在父元素的:after伪元素上使用。例如这个：

这在大多数情况下都可以正常工作，但是当您在浮动元素中有浮动元素时它会失败。它清除所有浮动，而不仅仅是子浮动。

一种可能的解决方法是添加

但这可能会产生不必要的副作用。

有没有办法只清除子浮动，而不是页面上的每个浮动？

我有一个无序列表，每个列表元素都包含一张照片和一个标题。我的 CSS 将网格设置为网格，其中每行包含三张照片。有时标题（或照片说明）比照片的宽度长，并且必须跨越两行。在某些情况下，当文本跨越 2 行以上时，它下面的列表元素会被推到右侧，并且列表中有很大的间隙。唯一对我有用的解决方法是<div style="clear:both"></div>在每三个<li></li>元素之后添加以下 HTML。该问题可以在列表元素的第三行中看到。我试过研究这个问题，但还没有找到纯 CSS 的方法。在我的示例代码中，我应用了 CSS clearfix 类，但它似乎没有任何效果。

我使用的是最新版本的谷歌浏览器。

这是我的代码：http: //jsfiddle.net/NVveP/1/

我正在使用网格 960 并且无法让 clearfix 工作，但是如果我clear:both在元素上使用，那么我可以获得所需的效果。我更喜欢使用 clearfix，因为我发现它更可靠（通常）。

在下面的代码中，标题部分有一个左侧徽标区域和一个右侧横幅区域，然后在其下方应该是导航栏。

这个导航栏是我遇到困难的元素。如果我添加style="clear:both;"到nav元素，它工作正常。但是，如果我在 header 元素中使用 clearfix，它就不起作用。

这是不起作用的页面（使用 clearfix）

这是有效的页面（使用 clear:both）

HTML

我希望我没有做任何明显的错误，但我看不到。

我很抱歉，因为这似乎是一件很简单的事情。

以下一个元素在换行符上的方式插入换行符的正确方法是什么？似乎有些事情会自动执行此操作（例如<p>在`中），但我看到下一个元素可以出现在最后一个元素旁边的行为。

HTML：

在 or 之后处理换行符的正确或优雅的方法是ul什么div？我是否忽略了处理此问题的代码的一般设置？

这是问题所在：正如您在左侧看到的浮动元素不对齐，而在右侧它们对齐。

http://i.stack.imgur.com/Qx8Zs.jpg

这不会一直发生，而且它不是特定于浏览器的（AFAIK） - 它会在刷新时自行纠正......我认为这是 clearfix 的问题？下面的 CSS。

我已经清楚地阅读了 CSS 布局属性

但是 clearfix 它的 css 属性或其他什么。

它可以用于浮动布局。

但我想解释一下 css clearfix 是 css 的这个属性还是用户定义的类或什么

我知道我提出问题的方式令人困惑

但我想知道是 clearfix iscss 类还是用户定义的

谢谢