Clearfix 清除浮动（闭合浮动）

概述

当一个容器的所有子元素都具备浮动属性时，容器的高度并不会被撑开，这往往是不符合预期的。此时需要一种称作 “clearfix” 的方法来实现 “闭合浮动” 的效果。

有人把这个场景笼统地称为 “清除浮动”，但实际上还是 “闭合浮动” 的说法更准确一些。

代码片段

类：

.clearfix::after {
    content: '';
    display: table;
    clear: both;
}

Mixin：

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

// 使用 mixin
.container {
	@include clearfix;
}

坑

• 如你所见，clearfix 需要占用容器的 ::after 伪元素。因此，当一个容器应用了 clearfix 方案之后，就不能用 ::after 伪元素来做其他事情了。