我一直在使用flexbox进行布局，而CSS float 则作为旧版浏览器的后备。总的来说，这很好，因为了解display: flex的浏览器将忽略任何flex元素上的float。
但是，我遇到这种方法问题的地方是使用clearfix。 Clearfix是一种广泛使用的hack，它使用不可见的:after伪元素来使容器正确清除/在其中包含任何 float 元素。但是，问题在于，此伪元素被支持flexbox的浏览器视为flex元素，这可能会导致意外的布局问题。例如，如果您有两个flex元素并使用justify-content: space-between，而不是放置在flex容器的开头和结尾，它们将出现在开头和中间，其中不可见的clearfix ::after伪元素占据结尾位置。
我的问题是:有没有办法在flexbox布局旁边使用clearfix而不引起这些问题？
最佳答案
解决此问题的一种方法是考虑其他clearfix方法。::after伪元素是一种方法，但是，正如您所指出的，它成为flex容器中的flex项。 (See Box #81 in this answer for more details)。
但是，还有其他多种清除浮点的方法。例如，您可以使用overflow: auto或overflow: hidden。
在此处查看一些替代方法:
解决问题的另一种方法是使用modernizr.com进行特征检测。
从网站: