通过 display:flow-root 来 clearfix

常见的 clearfix 方法有：

.clearfix:after {
    content: "";
    clear: both;
    display: block;
}

.wrapper {
    overflow: hidden;
}

.wrapper {
    overflow: auto;
}

或者通过触发 BFC 也可以实现清除浮动，具体可以参阅相关文章。

如今我们可以给父元素使用 display: flow-root; 即可实现 clearfix。

.wrapper {
    display: flow-root;
}

考虑到兼容性，你也可以这样写：

.wrapper::after {
    content: '';
    display: block;
    clear: both;
}

@supports (display: flow-root) {
    .wrapper {
        display: flow-root;
    }

    .wrapper::after {
        content: none;  
    }
}

也可以这样写：

.wrapper {
    display: flow-root;
}

@supports not (display: flow-root) {
    .wrapper::after {
        content: '';
        display: block;
        clear: both;
    }
}