有没有办法在 flexbox 旁边使用 clearfix hack？

Posted 2023-03-04

【中文标题】有没有办法在 flexbox 旁边使用 clearfix hack？

【英文标题】：Is there a way to use the clearfix hack alongside flexbox?

【发布时间】：2016-04-23 19:23:53

【问题描述】：

我一直在使用 flexbox 进行布局，使用 CSS 浮动作为旧浏览器的后备。总的来说，这很好用，因为理解 display: flex 的浏览器会忽略任何 flex 项上的浮动。

但是，我在使用这种方法时遇到的一个问题是 clearfix。 Clearfix 是一种广泛使用的 hack，它使用不可见的 :after 伪元素使容器正确清除/包含其中的任何浮动元素。然而，问题是这个伪元素被支持 flexbox 的浏览器视为一个 flex 项，这可能会导致意想不到的布局问题。例如，如果你有两个弹性项目并使用justify-content: space-between，它们不会被定位在弹性容器的开始和结束处，而是出现在开始和中间，不可见的 clearfix ::after 伪元素占据结束位置。

我的问题是：有没有办法将 clearfix 与 flexbox 布局一起使用而不会导致这些问题？

【问题讨论】：

您可以使用Modernizr 来检测对弹性框的支持并隐藏该::after 元素。

【参考方案1】：

解决此问题的一种方法是考虑替代的 clearfix 方法。

::after 伪元素是一种方法，但正如您所指出的，它成为弹性容器中的弹性项目。 (See Box #81 in this answer for more details)。

但是还有很多其他方法可以清除浮动。例如，您可以使用overflow: auto 或overflow: hidden。

在这里查看一些替代方案：

What is a clearfix? What methods of ‘clearfix’ can I use? Clearing Floats: An Overview of Different clearfix Methods

---

解决问题的另一种方法是使用modernizr.com 进行特征检测。

来自网站：

所有网络开发人员都会遇到浏览器和浏览器之间的差异 设备。这主要是由于不同的功能集：最新的 流行浏览器的版本可以做一些很棒的事情 旧版浏览器不能——但我们仍然必须支持旧版浏览器。

Modernizr 让提供分层体验变得容易：利用 支持它们的浏览器中最新和最强大的功能，无需 让不太幸运的用户高高在上。

【参考方案2】：

试试这个，它将处理弹性容器中的伪元素：

.clearfix::before,
.clearfix::after 
  flex-basis: 0;
  order: 1;

【参考方案3】：

我不确定这是否与您遇到的问题相同，但我使用的是相当复杂的 flex 设置：

display: flex;
flex-wrap:wrap;
align-items: center;

我遇到了一个类似的问题，我想使用 clearfix 来确保我可以在某个点拆分内容，在我的情况下，它是在特定的屏幕尺寸上使一些数据中断。在通过反复试验找到对我有用的解决方案之前，我感到非常困惑：

<div class="clearflex"></div>

.clearflex
    width:100%;

通过在 flex 内容之间添加一个宽度为 100% 的空 div，它似乎使该内容像 clearfix 一样中断到新行上。如果您需要在行之间进行一些填充，您还可以为 clearflex 添加一个高度。

【参考方案4】：

您可以将 flex-wrap 设置为您的 flex 容器，并将 width: 100% 设置为伪元素之后，这样它就会自动换行并且不会弄乱对齐方式。

【讨论】：

我刚试过这个，据我所知，它似乎不起作用。 :after 伪元素只占用了所有剩余空间但不换行（所以就好像你在使用justify-content: flex-start）。你能给我指出一个可行的例子吗？

【参考方案5】：

实现此目的的一种方法是在.clearfix 上使用overflow: hidden 或overflow: auto 并完全删除.clearfix::after。

.clearfix 
    overflow: auto;  /* or overflow: hidden; */

但是，如果由于某种原因您不能在.clearfix 上使用overflow 属性，您可以在第二个div 上使用margin-left: auto（考虑到您的布局只有两列）。这样，不可见的::after 将被放置在两个布局 div 之间。

.clearfix  ... 
.clearfix::after  .... 
.clearfix > div:last-of-type 
    margin-left: auto;
    /* for justify-content: space-between only.
    * For other option, adjust accordingly */