Question

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

然而，我遇到这个问题的一个问题是使用clearfix。 Clearfix是一种广泛使用的hack，它使用不可见的:after伪元素来使容器正确清除/包含其中的任何浮动元素。但是，问题是这个伪元素被支持flexbox的浏览器视为弹性项目，这可能导致意外的布局问题。例如，如果您有两个弹性项并使用justify-content: space-between，而不是位于弹性容器的开头和结尾，它们将出现在开头和中间，并使用不可见的clearfix ::after伪 - 取得最终位置的元素。

我的问题是：有没有办法在不引起这些问题的情况下使用clearfix和flexbox布局？

Answer 1

处理此问题的一种方法是考虑替代的clearfix方法。

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

但是还有其他各种方法来清除漂浮物。例如，您可以使用overflow: auto或overflow: hidden。

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

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

来自网站：

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

Modernizr可以轻松提供分层体验：利用   支持它们的浏览器中的最新和最好的功能，没有   让不那么幸运的用户高低干燥。

Answer 2

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

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

Answer 3

你可以设置flex容器的flex-wrap和宽度：100％到后面的伪元素，这样它就会换行而不会弄乱对齐。

Answer 4

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

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

但是，如果由于某种原因不能在overflow上使用.clearfix属性，可以在第二个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 */
}

Answer 5

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

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

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

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

.clearflex{
    width:100%;
}

通过在flex内容之间添加一个宽度为100％的空div，似乎使该内容像clearfix一样完全插入新行。如果在行之间需要一些填充，也可以为clearflex添加高度。

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

5 个答案: