这里描述了许多方法来修复折叠到小于其浮动子代的父代。
解决方案 2 添加一个clear:both
样式化的 div 作为折叠的父级的最后一个子内部。解决方案 3 使用伪元素在折叠的父元素之后clear:both
添加样式化的内容。
无论是在折叠的父级内部还是之后添加它,如何添加clear:both
相同?如果相同,为什么不在父级之后添加解决方案 2 中的 div 呢?
无论是在折叠的父级内部还是之后添加它,如何添加
clear:both
相同?
两者都将其添加到折叠的父级中。和伪元素总是在父元素内部生成内容:before
。:after
由于:after
确实意味着作为最后一个子生成内容,这使得解决方案 3 在这方面与解决方案 2 相同,关键区别在于 #2 使用 HTML 而 #3 是 CSS 解决方案。
如果相同,为什么不在父级之后添加方法 1 中的那个 div 呢?
因为额外的标记被认为是代码异味。(然而,就我个人而言,我发现伪元素方法同样如此。)
解决方案4,即使用overflow
父元素本身的属性,是我通常使用的。实际上,所有这些都是间接解决方案,并不是为了解决浮动的父母崩溃的问题,但考虑到浮动的性质,这是我们所拥有的最好的。
:after
也在元素内部。:after
和伪类在:before
被选元素的内容之前或之后添加一个伪元素。
示例:http: //jsfiddle.net/UcDEA/1/
但我首选的解决方案,你在这里没有提到的是给包含浮动元素的元素溢出,自动或隐藏......