标准答案
- 浮动元素会脱离普通文档流，如果父元素里只有浮动子元素，父元素可能计算不到它们的高度，表现为高度塌陷。
- 清除浮动的目标是让父元素重新包住内部浮动内容，或者让后续元素不再围绕浮动排列。
- 传统方式是在浮动元素后面加 clear: both 的空元素，或者用 clearfix。
- clearfix 的原理是通过父元素的 ::after 生成一个块级盒子，并设置 clear: both，让它出现在浮动元素之后，把父元素高度撑起来。
- 现代新代码更推荐 display: flow-root 创建 BFC，或者直接用 Flex/Grid；overflow: hidden 也能清浮动，但可能裁剪内容。
题目解析
这题要先说清“为什么要清除浮动”：父元素高度塌陷和后续元素环绕。
clearfix 的关键不是伪元素本身，而是伪元素上的 clear: both。
代码示例
经典 clearfix 和现代 flow-root 都可以让父元素包含浮动。
CSS
.clearfix::after {
content: "";
display: block;
clear: both;
}
.modern-clear {
display: flow-root;
}常见误区
- 只记得 clearfix 代码，不知道它解决父元素高度塌陷。
- 用 overflow: hidden 清浮动，却把阴影、下拉层或溢出内容裁掉。
- 现代布局仍然大量用 float 做页面结构。