将 ::before 和 ::after clearfix 更新为简单的 ::after 是否安全？答案

【问题标题】：Is it safe to update ::before and ::after clearfix to a simple ::after one?将 ::before 和 ::after clearfix 更新为简单的 ::after 是否安全？
【发布时间】：2016-12-10 15:07:27
【问题描述】：

目前，我使用的一个框架使用了经典的 clearfix：

@mixin clearfix {
    zoom: 1;

    &::before,
    &::after {
        content: '';
        display: table;
    }

    &::after {
        clear: both;
    }
}

我想知道现在不再支持 IE7 是否可以安全地放弃使用 ::before，以便我可以清除修复可能还需要伪元素用于装饰目的的元素。我的建议是把它变成如下：

@mixin clearfix {
    &::after {
        clear: both;
        content: '';
        display: table;
    }
}

据我所知，这将与 ::before 一样有效，但我想在进行更改之前绝对确定，因为如果我弄错了，这将影响数十万用户，而且我不想成为那个人。

提前致谢！

【问题讨论】：

我们无法知道。这是特定于您的情况，因此此问题基于意见或需要讨论，因此对于 Stack Overflow 来说是题外话。我不清楚你为什么觉得这种改变是必要的......
真的是针对我的情况吗？我认为在一个有许多不同的 clearfix 解决方案的世界中，这个问题是有价值的。如前所述，我的目标是减少使用两个伪元素的需要，而只需一个即可实现 clearfix。我只是想知道是否有人知道继续使用这两个伪元素的任何理由。我觉得为了释放两个伪元素之一可能需要进行更改，因此它可以用作可能还需要content 或display 属性的装饰元素。
但是您的声明“这将影响数十万用户” 是针对您的。对于一般用途，它可能很好，但如果它是关键任务，那就不同了。我们无法知道您的具体情况是否如此。只有您可以做出决定...根据您的指标。
我现在明白你的意思了。感谢您的意见。

标签： css layout internet-explorer-8 pseudo-element clearfix

【解决方案1】：

我决定修改 mixin，以便我可以在提示时使用简单版本，否则允许它默认为当前版本。

我还注意到 IE8 也不支持，因为伪代码使用了双冒号，所以我在那里的时候也修复了这个问题...

@mixin clear-fix($simple: false) {
    @if $simple != true {
        zoom: 1;

        &:before,
        &:after {
            content: '';
            display: table;
        }

        &:after {
            clear: both;
        }
    }
    @else {
        &::after {
            clear: both;
            content: '';
            display: table;
        }
    }
}

用法：

@include clear-fix; // prints out old-skool :before/:after with IE7/8 support

@include clear-fix(true); // prints out simple ::after method

【讨论】：