0

这里的社区似乎同意旧的“clearfix”黑客现在已被贬值和取代overflow:hidden。不幸的是，在某些情况下，即使使用这种方法也会导致问题。（例如：如果它工作正常，它看起来像这样。）

使用老式的主要问题<div class="clear">似乎是它创建了一个div仅用于改变表示的元素——这似乎混淆了纯语义标记与表示的理想。

但除此之外，它似乎适用于所有浏览器和所有情况（不能说“clearfix”或overflow:hidden）。

使用还有其他缺点clear:both吗？用起来真的有那么差吗？还是只是个人喜好？

4

3 回答 3

1

有副作用

clear: both有一个副作用，如果在同一块格式化上下文中存在任何其他浮点数，则该clear: both元素将被强制低于它们。有时这就是你想要的。有时不是。这个jsbin演示了它会吃掉你的午餐的例子：

<code>clear: both</code> 导致问题的示例。

诀窍在于控制清除元素应与哪些浮动进行交互。您可以使用块格式化上下文来执行此操作，这是一个绝缘矩形，所有浮动和清除元素在其中交互。块格式化上下文之外的浮动和清除元素不能与内部的浮动或清除元素交互。

这是使用时要牢记的一个重要缺点clear: both。用起来真的有那么差吗？不，您只需要了解浮动和清除如何交互，以及如何在需要时阻止它们这样做。在许多情况下，这些问题不会出现，因此选择清除浮动的方法可能是个人喜好问题。但有些情况需要更深入地考虑浮动和清算的运作方式。每种清除方法都有副作用，因此您必须根据自己的情况选择正确的方法。哪种“ clearfix ”方法最好？

于 2013-03-01T20:54:56.460 回答
1

没关系。不如纯 CSS 方法好，不，但有时 overflow:hidden / auto 无法正常工作（例如，当您希望将绝对定位的元素“弹出”出其容器时）。

是的，它增加了可维护性成本，是的，理论上它对于 SEO 来说不是最理想的，但这并不是一个主要的罪过。

于 2013-02-28T23:31:58.503 回答
0

clear:both只是意味着不允许向左或向右浮动。确实存在另一种方法，但对于旧浏览器来说并不安全。

.element:after { content:""; clear:both; }

我很确定：是标准的，如果您不完全理解浮点数（我花了一段时间），浮点数就很棘手。

空白存在的原因是浮动元素实际上并不“存在”，因为它们没有为容器提供确定的尺寸来环绕。您可以在浮动后的项目上使用clear:left clear:right或clear:both，它会创建一个硬线，与使用该<div class="clear"></div>方法相同。

就个人而言，我使用久经考验的 hack 并添加伪元素，以便（希望）全面支持它。

于 2013-02-28T22:35:30.770 回答