clear属性清除的是当前元素外边距行为，强制其上边界避开前面浮动元素的下边界；它不消除浮动本身，也不修复父容器塌陷，需配合BFC触发（如display: flow-root）才能治本。
clear 属性到底清的是什么
它不清“浮动本身”，只影响当前元素的**外边距行为**——强制让当前元素的上边界避开前面浮动元素的下边界。很多人以为 clear 能“清除浮动影响”，其实它只是让这个元素自己“躲开”，对后续兄弟元素毫无约束力。
常见错误现象：clear: both 加在某个 div 上，结果后面的 div 还是贴着左边浮动元素排列；或者清完之后出现意外的空白间隙。
- 只对设置了
display: block（或类似块级表现）的元素生效，inline元素加了也无效 -
clear: left只避开左侧浮动，right同理；both是最常用但别滥用 - 如果前一个浮动元素高度为 0（比如空
div浮动），clear实际无效果——因为没东西可“避”
为什么 clear 之后还有塌陷、错位
根本原因：父容器没形成 BFC，内部浮动元素脱离文档流，导致父容器高度坍缩；clear 只解决“当前元素位置”，不修复父容器高度。
使用场景：你给子元素加了 float: left，又想让下一个模块从新行开始，但发现它卡在浮动元素右侧下方，甚至整个页面布局偏移。
立即学习“前端免费学习笔记（深入）”；
- 单纯靠
clear治标不治本；必须配合 BFC 触发（如overflow: hidden、display: flow-root）才能撑起父容器 -
display: flow-root是现代首选，比overflow: hidden更安全（不意外裁剪内容） - IE8+ 支持
clear，但flow-root不支持 IE，需按目标环境取舍
float + clear 的替代方案现在还值得用吗
绝大多数情况不推荐。CSS Grid 和 Flexbox 已能更可靠地实现同样布局目标，且没有浮动带来的连锁副作用。
例外场景：需要兼容老版本 Android WebView 或 IE9–10 的后台管理页；或维护一段历史代码，改用 Flex 会引发大量连锁调整。
- Flex 布局中完全不需要
clear，用flex-wrap或align-items控制换行和对齐 - Grid 中用
grid-template-areas或grid-column显式控制区域，浮动和 clear 都无意义 - 若强行混用（比如在 flex 容器里给子项设
float），clear会失效——flex item 不参与常规文档流定位
clear 和 clearfix 的关系到底是什么
clearfix 是一类 hack 技巧的统称，核心是用伪元素 + clear 解决父容器塌陷，不是 CSS 标准属性。
典型错误：把 clearfix 类直接加在子元素上，或以为加了就一劳永逸；实际它只作用于**应用该类的父容器自身**。
- 经典
::after方案中，clear: both是加在伪元素上，靠它“撑开”父容器底部 - 现代写法优先用
display: flow-root，一行解决，无需伪元素、无额外 DOM 干扰 - 如果用 JS 动态插入浮动元素，记得手动触发父容器重绘（如修改
style.minHeight），否则clearfix可能来不及生效
浮动布局真正难的不是怎么加 clear，而是判断“谁该清、谁该撑、谁其实根本不用浮”。一旦开始数 clear: both 加了多少次，大概率该重构了。
