gpt4 book ai didi

html - 受 sibling 影响的css clearfix

转载 作者:太空宇宙 更新时间:2023-11-04 13:09:22 26 4
gpt4 key购买 nike

我定义了一个容器元素,包含一个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;
}

访问http://jsfiddle.net/ltchronus/MV9pm/看我的演示。

最佳答案

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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com