clear属性应加在被浮动元素覆盖的后续元素上，而非浮动元素自身；常用clear: both，clearfix适用于父容器包裹浮动子项的场景；Flex/Grid中浮动和clear基本失效，但邮件等兼容场景仍需使用。
clear属性加在谁身上才有效
加在「被覆盖的元素」上，不是加在浮动元素自己身上。很多人误以为给float: left的盒子加clear就能起作用，其实它只对自身后续的盒模型布局生效，而真正要“推开”浮动、避免重叠的，是后面那个被压住的元素。
- 错误写法：
.floated-box { float: left; clear: both; }——clear在这里完全无意义 - 正确写法：
.next-element { clear: both; }，这样它才会下移到浮动元素底部以下 - 如果后面多个元素都受影响，每个都要单独加，或用一个空容器统一清除（见下一条）
用clearfix还是直接clear:both
直接在受影响元素上写clear: both最直白，但容易漏加、难维护；clearfix是封装好的方案，适合父容器内部有浮动子项、且父容器需要包裹高度的场景。
- 适用
clear: both：表单行、卡片列表中某一项下方要强制换行，比如提交按钮必须在输入框下面 - 适用
clearfix：父div里全是float: left的标签，父容器高度塌陷，此时在父容器上加clearfix类更合理 -
clearfix本质是用::after生成一个带clear: both的伪元素，不额外占DOM节点
clear的值选left/right/both有什么区别
选错值会导致清除失效，尤其在混合浮动方向时容易踩坑。浏览器会检查「当前元素的边」是否与指定方向的浮动元素相邻，只在匹配时才下移。
-
clear: left→ 只避开左边浮动的元素，右边浮着的照样盖过来 -
clear: right→ 同理，只管右边 -
clear: both→ 两边都避开，95%的日常场景该用这个 - 如果页面只有
float: right，却写了clear: left，那根本不会触发清除行为
Flex/Grid时代还要不要care clear
新布局模式下，float本身已退居次要地位，但老项目、邮件模板、CMS输出内容等仍大量存在浮动，clear没过时，只是使用频率低了。
立即学习“前端免费学习笔记（深入）”；
- 用
display: flex或display: grid布局时，浮动会自动转为inline-level行为，clear无效 —— 这时候不该清，该改布局方式 - 混用浮动和Flex（比如Flex容器里某个子项又
float）会导致不可预测的重叠，这种组合本身就是隐患 - 邮件HTML仍重度依赖
float和clear，因为客户端兼容性差，别想着全切Flex
