使用“clear：both”清除浮动div有什么缺点？

Question

似乎这里的社区同意旧的“clearfix”黑客现在由overflow:hidden depreciated and superseded This。不幸的是，甚至使用这种方法会导致问题。 （例如：如果this正常工作，则{{3}}看起来像{{3}}。）

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

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

使用clear:both还有其他任何弊端吗？使用真的那么糟糕吗？或者只是个人偏好？

Answer 1

没关系。不像纯CSS方法那么好，不，但有时溢出：hidden / auto就不能正常工作（例如，当你想要一个绝对定位的元素'pop'出其容器时）。

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

Answer 2

有副作用

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

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

这是使用clear: both时要记住的一个重要缺点。使用真的那么糟糕吗？不需要。您只需要知道浮动和清除如何相互作用以及如何防止它们在您需要时这样做。在许多情况下，这些问题没有出现，因此选择清除浮动的方法可能是个人偏好的问题。但是有些情况需要更深入地考虑浮动和清算的工作原理。每种清算方法都有副作用，因此您必须根据自己的情况选择合适的方法。 Which method of 'clearfix' is best?

上有详细的答案

Answer 3

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

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

我很清楚：标准，如果你不完全理解它们，花车就很棘手（它花了我一段时间）。

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

就个人而言，我使用经过验证的黑客并添加伪元素，以便在（希望）支持它的时候。