浮动元素脱离文档流导致父容器高度塌陷，clearfix技术通过伪元素::after配合clear: both使父容器感知浮动子元素，标准写法为.clearfix::after{content:"";display:table;clear:both}。
浮动元素会脱离文档流，导致父容器无法正确计算高度，出现高度塌陷——这是CSS布局中非常经典的问题。解决的关键不是“取消浮动”，而是让父容器“感知”到浮动子元素的存在。使用 ::after 伪元素配合 clear: both 是目前最主流、兼容性好且语义清晰的方案，也就是常说的 clearfix 技术。
为什么父元素会塌陷？
因为浮动元素（float: left/right）会从普通文档流中移出，父容器在计算高度时只考虑非浮动内容。如果子元素全浮动，父容器就“看不见”它们，高度自然变成 0 或仅剩内边距/边框占用的空间。
clearfix 的标准写法（推荐）
给需要包裹浮动子元素的父容器添加一个类（如 .clearfix），并定义如下样式：
.clearfix::after {
content: "";
display: table;
clear: both;
}
立即学习“前端免费学习笔记（深入）”；
说明：
• content: "" 是伪元素生效的必要条件；
• display: table 触发 BFC（块级格式化上下文），同时保证该伪元素能撑开父容器；
• clear: both 强制它出现在所有浮动元素下方，从而“拉住”父容器底部。
兼容老版本 IE 的写法（可选）
如果还需支持 IE6–7，可补充 *zoom: 1（触发 hasLayout）：
.clearfix {
*zoom: 1;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
注意：::after 是 CSS3 写法，IE8+ 支持；IE7 及更早需用 :after（单冒号），但现代项目通常无需降级至此。
其他清除浮动的方式对比
• 给父元素设置固定高度：不灵活，响应式失效；
• 在末尾加空标签（如 <div style="clear:both"></div>）：污染 HTML 结构，不推荐；
• 触发父元素 BFC（如 overflow: hidden）：简单但可能意外裁剪溢出内容或影响阴影/滚动行为；
• 使用 Flex 或 Grid 布局替代浮动：更现代，但属于布局重构，不适用于必须兼容旧场景或渐进增强场景。
