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