使用“clear:both”清除浮动 div 的缺点是什么？答案

【问题标题】：What are the downsides to using "clear:both" to clear floating divs?使用“clear:both”清除浮动 div 的缺点是什么？
【发布时间】：2013-02-15 07:37:07
【问题描述】：

这里的社区似乎同意旧的“clearfix”hack 现在是overflow:hidden 的depreciated and superseded。不幸的是，在某些情况下，即使使用这种方法也会导致问题。（例如：This 如果工作正常，看起来会像 this。）

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

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

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

【问题讨论】：

overflow:hidden（或overflow:auto或overflow:scroll）应该是包装内容的方式。
我个人是反对overflow:hidden;的，当你使用它的时候，你必须对div里面的absolutedivs说byebye；特别是通知、消息框、提示之类的东西，你不得不把它们都放在里面。
在关注社区使用overflow: hidden 之前，我会更仔细地查看。在某些情况下很好，而在其他情况下则有问题。请参阅@clairesuzy 对您引用的问题的回答 (stackoverflow.com/a/5566031/101869)，然后查看“哪种 'clearfix' 方法最好？”中的对话。 (stackoverflow.com/q/211383/101869)。在我的回答中，我概述了为什么我认为 display: inline-block 是最强大的解决方案 (stackoverflow.com/a/9932508/101869)。

标签： html css css-float clearfix

【解决方案1】：

clear:both 仅表示不允许向左或向右浮动。确实存在替代方法，但对于旧版浏览器并不安全。

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

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

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

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

【讨论】：

值得指出的是，大多数浏览器在打印时会忽略动态内容 - 因此如果您需要纸张输出，clearfix 将无法工作。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

有副作用

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

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

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

【讨论】：

在构建复杂的应用程序时，您通常会将布局嵌套在其他布局中。对于这种情况，假设您要清除的主要灰色区域内还有其他浮动。最终会发生的是，第一个 clear:both 以及随后的所有内容都将被推到侧边栏下方。
再看看，@DjangoReinhardt。让我知道这是否使我所描述的情况更清楚。
谢谢，我又看了一遍。如果您清除所有浮动，则没有问题：jsbin.com/eladob/6
@DjangoReinhardt，有效的原因是您浮动了主要内容部分，这使其成为新的块格式化上下文，而不是因为您清除了所有浮动内容。这种方法的问题是你不能让主要部分填充剩余的水平空间（你设置一个固定的宽度）。如果没有固定宽度，您的布局就会中断。你可能不喜欢这种风格，但这说明了为什么clear: both 会产生意想不到的副作用。
酷，明白了。我无法想象有很多网站用内容填充整个屏幕宽度，甚至更少使用你建议的浮动，但我相信有些网站是合法的！谢谢！