我定义了一个容器元素，包含一个float div和一个ul， 并且 ul 元素包含一些 float li 元素。 我想清除 ul 的 float ，但 ul 的高度受其 float 兄弟元素的影响。 这是 clearfix 的错误吗？
.clearfix {
*zoom: 1;
}
.clearfix:after {
content:".";
display:block;
height:0;
line-height: 0;
clear:both;
visibility: hidden;
}
最佳答案
bug 不在 clearfix 中，“bug”是 clearfix。
因为 div 是 float 的，clearfix 必须清除那个 float 的兄弟节点，即使它不是源代码中 ul 的内容的一部分。这是因为 ul 的 float 内容和 float div 都参与了相同的 block formatting context。 (根元素的那个)。
您可以通过将其 overflow 属性设置为 visible 以外的其他内容，在 ul 中触发新的 block 格式化上下文来轻松纠正此问题确保 clearfix 只本地化到 ul 的格式化上下文，但是一旦你这样做了，clearfix 就变得完全不必要了，你也可以完全摆脱它。
这就是为什么我个人不使用，也不推荐使用 clearfix:充其量它是一个不必要的 hack — 这并不是说设置 overflow 不是 黑客攻击；它也是，因为触发 BFC 只是一个 not-so-intended side-effect当然不是 overflow 的设计目的，但它比您刚刚遇到的由 clearfix 引起的问题更容易解决，特别是如果您对 float 模型没有深入的了解(和 even I don't claim that myself )
关于html - 受 sibling 影响的css clearfix，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24799686/