清除浮动影响的核心方案是clear属性和clearfix伪元素，现代推荐使用display: flow-root触发BFC，简洁无副作用；旧项目可选clearfix，避免用clear空标签。
浮动（float）曾是CSS布局的主力，但容易引发父容器高度塌陷、后续元素错位等问题。解决核心是清除浮动影响，让文档流恢复正常。clear 和 clearfix 是两种经典方案，各有适用场景。
clear 属性：简单直接的清除方式
clear 用于指定元素的哪一侧不允许出现浮动元素，常配合空标签或自身使用。
- clear: left; — 元素左侧不与任何左浮动元素相邻
- clear: right; — 右侧不与右浮动元素相邻
- clear: both; — 左右两侧都不允许浮动元素（最常用）
典型用法是在浮动元素下方加一个空标签：。虽有效，但污染HTML结构，不推荐在现代开发中作为首选。
clearfix 伪元素：干净优雅的现代解法
通过在父容器上添加一个类（如 .clearfix），利用 :before 和 :after 伪元素插入内容并清除浮动，不改动HTML结构。
立即学习“前端免费学习笔记（深入）”；
标准 clearfix 写法（兼容 IE8+）：
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
关键点：
- :before 创建匿名表格单元格，防止顶部外边距合并
- :after 触发 BFC 并清除浮动，使父容器包裹所有浮动子元素
- display: table 比 display: block 更稳妥，避免某些老版本浏览器问题
更简洁的现代替代：触发BFC即可
其实，只要让父容器形成块级格式化上下文（BFC），就能自动包含浮动子元素，无需伪元素。以下任一方式都可替代 clearfix：
- overflow: hidden;（注意可能隐藏溢出内容）
- display: flow-root;（推荐！专为此设计，无副作用）
- float: left; 或 position: absolute;（会改变定位模式，慎用）
例如：.container { display: flow-root; } 一行代码就搞定，语义清晰且无兼容性顾虑。
基本上就这些。float 布局已逐渐被 Flexbox 和 Grid 取代，但在维护旧项目或特殊排版中仍需掌握清除技巧。优先用 display: flow-root，次选 clearfix，少用 clear 标签。
