首页 文章

这两种修复折叠父母与浮动孩子的方法是一样的,但为什么呢?

提问于
浏览
1

Here描述了许多方法来修复折叠到小于其浮动子节点的父节点 .

解决方案2添加一个 clear:both 样式的div作为折叠父项的最后一个子项内幕 . 解决方案3使用伪元素在折叠父级之后添加 clear:both 样式的内容 .

无论是在折叠父级内部还是之后添加_1129729都如何添加?如果它是相同的,为什么不在父母之后添加解决方案2中的div呢?

2 回答

  • 1

    如何添加清除:无论是在内部还是在折叠父项之后添加它,都是相同的?

    两者都将它添加到折叠父级中 . :before:after 伪元素始终在父级内生成内容 . 由于 :after 实际上意味着生成内容作为最后一个子项,这使得解决方案3在该方面与解决方案2相同,关键区别在于#2使用HTML而不是#3是CSS解决方案 .

    如果它是相同的,为什么不在父母之后添加方法1中的div呢?

    因为额外的标记被认为是代码气味 . (就个人而言,我发现伪元素方法同样如此 . )

    解决方案4,即在父元素本身上使用 overflow 属性,是我通常使用的 . 实际上所有这些都是间接的解决方案,并不是为了解决浮子的父母崩溃的问题,而是考虑浮子的本质,它已经得到了 .

  • 1

    :after 也在元素内 . :after:before 伪类在所选元素的内容之前或之后添加伪元素 .

    示例:http://jsfiddle.net/UcDEA/1/

    但是我在这里没有提到的首选解决方案是给包含浮动元素的元素一个溢出,自动或隐藏...

相关问题