Nic*_*k F 6 css css3 css-float clearfix flexbox
我一直在使用flexbox进行布局,CSS浮动作为旧浏览器的后备.总的来说这很有效,因为理解的浏览器display: flex会忽略任何弹性项目上的浮动.
但是,我遇到这个问题的一个问题是使用clearfix.Clearfix是一种广泛使用的hack,它使用不可见的:after伪元素使容器正确清除/包含其中的任何浮动元素.但是,问题是这个伪元素被支持flexbox的浏览器视为弹性项目,这可能导致意外的布局问题.例如,如果您有两个弹性项目并使用justify-content: space-between,而不是位于弹性容器的开头和结尾,它们将出现在开头和中间,隐形的clearfix ::after伪元素占据结束位置.
我的问题是:有没有办法在不引起这些问题的情况下使用clearfix和flexbox布局？
解决这个问题的一种方法是考虑替代的clearfix方法。
\n\n伪::after元素是一种方法，但正如您所指出的，它成为 Flex 容器中的 Flex 项目。（有关更多详细信息，请参阅本答案中的框#81）。
但是还有多种其他方法可以清除浮动。例如，您可以使用overflow: auto或overflow: hidden。
在这里查看一些替代方案：
\n\n\n\n解决问题的另一种方法是使用modernizr.com进行功能检测。
\n\n来自网站：
\n\n\n\n所有网络开发人员都会遇到浏览器和设备之间的差异。\n \xe2\x80\x99s 主要是由于不同的功能集：流行浏览器的最新\n 版本可以做一些很棒的事情，\n 较旧的浏览器可以 \xe2\x80\x99t \xe2\x80\x93 但我们仍然有来支持年长的人。
\n\nModernizr 可以轻松提供分层体验：利用支持这些体验的浏览器中的\n最新、最强大的功能，而不会让不幸的用户陷入困境。
\n
| 归档时间： |
|
| 查看次数： |
7480 次 |
| 最近记录： |