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
伪元素来做其他事情了。