.clearfix 还需要吗？答案

【问题标题】：.clearfix still needed?.clearfix 还需要吗？
【发布时间】：2011-04-18 23:10:22
【问题描述】：

最后一个问题。我继承的代码如下：

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

似乎有很多技巧。现代浏览器 IE7 及更高版本是否仍需要此功能？

【问题讨论】：

复制：stackoverflow.com/questions/5565668/…

标签： html css

【解决方案1】：

您不需要为现代浏览器使用所有这些。

仅使用 overflow: hidden 即可，并且在 99% 的情况下就足够了。

查看深入讨论此问题的相关问题：

Is clearfix deprecated?

【讨论】：

在哪里放置溢出：隐藏？我习惯将 class="clearfix" 添加到我的很多
我倾向于将overflow: hidden 添加到每个需要它的元素中。所以如果你有一个包含浮点数的 div：<div id="container">，在你的 CSS 中你会写 #container { overflow: hidden }。不要将overflow: hidden 放在body 上：这会阻止您的页面滚动。
谢谢。我将它添加到具有 ID 的 div 的 CSS 定义中。但我在那个 div 里面有更多的 div。会被div内的div继承吗？
不，overflow property 不是可继承的。但是，clearfix 类 also 是不可继承的 - 正如您所说，您习惯于将 clearfix 类添加到许多 divs 中。您只需向包含floated 元素的divs 添加浮动间隙。您不需要（浮动清除）将overflow: hidden 添加到许多元素。

【解决方案2】：

一种一直对我有用的非常简单的跨浏览器方法是将其放在任何浮动内容下方：

<div style="clear: both;">&nbsp;</div>

如果你想更整洁，也可以使用class="clear"。

有空间并不总是必要的，但在某些情况下是必要的。

【讨论】：

【解决方案3】：

我仍然使用它只是因为我宁愿在我的所有元素上使用 class="clear" 与 overflow: auto 或 hidden。

【讨论】：