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 伪元素来做其他事情了。
标签: CSS
最后更新:2023-02-12 13:14:50

相关小抄