clear属性仅控制换行位置，不负责列对齐；真正实现列对齐需用flex、grid或BFC容器（如display: flow-root），而非clear。
clear属性本身不负责“列对齐”，只控制换行位置
加 clear: both 确实会让元素从浮动下方顶格开始，但它不会调整列宽、不会拉齐左右两栏的底边、也不会修复父容器塌陷——它只是把当前块的上边界“推下来”，避开前面的浮动兄弟。所谓“保持列对齐”，其实是误把视觉换行当成了布局对齐。真正影响列对齐的是 table-layout: fixed、display: flex 或 BFC 容器行为，不是 clear。
为什么 clear 之后文字还是卡在浮动右边？
最常见原因不是写法错，而是 DOM 结构没满足 clear 的触发前提：
-
clear只对「紧邻的前一个兄弟元素」是浮动时才生效；中间插了一个普通<div>，就彻底失效 <li>目标元素自身是 <code>inline或inline-block，clear对它完全没反应（必须是块级） - 浮动元素被
position: absolute或display: none包裹了，它们不算“浮动兄弟” - 父容器用了
overflow: hidden却没设高度，或用了flex，此时clear被忽略 - 用
display: flex替代浮动：父容器设display: flex，子项自动等高，clear彻底不用 - 用
display: grid：定义明确行列轨道，align-items: stretch默认撑满，对齐可控 - 如果必须保留浮动，给父容器设
display: flow-root（推荐）：创建 BFC 自动包裹浮动，无需伪元素或空 div，且响应式安全 - 老项目兼容 IE8+？可用
overflow: hidden+ 明确高度，但注意会裁剪溢出内容 - 必须给
<table> 元素设 <code>table-layout: fixed，否则列宽由内容决定，word-break等样式基本无效 <table> 必须有明确宽度（如 <code>width: 100%），且所有列宽定义方式要统一（全用<col>或全用th的width）- 两表对齐需同时满足：
table-layout: fixed、相同总宽、相同列宽定义、border-collapse: collapse一致、字体字号一致 -
word-break: break-all和overflow-wrap: break-word要配合使用，前者断字符，后者保单词，避免只写一个导致换行不一致
想让多列内容底部对齐，别依赖 clear
用 clear 强制换行后，左右两列高度不同，底部自然错位。这时该换思路：
table-layout: fixed 才是表格列对齐的硬性前提
如果你实际是在处理表格，并发现加了 clear 后两列还是不对齐，大概率问题根本不在浮动，而在表格渲染逻辑：
立即学习“前端免费学习笔记（深入）”；
真正需要“强制换行并列对齐”的场景，几乎都该跳出浮动+clear的老套路。现代布局中，clear 是个窄口径工具，只解决“避开前一个浮动”的位置问题；而对齐是容器级约束，得靠 flex、grid 或 flow-root 来兜底。容易被忽略的是：哪怕 clear 写对了，只要父容器没形成 BFC，浮动依然会泄漏影响后续布局。
