clear 不是 HTML 属性，而是 CSS 属性；HTML 标准从未定义 clear 全局属性，浏览器会忽略 <div clear="both"> 等非法写法；现代推荐用 display: flow-root 解决父容器塌陷，而 clear 仅适用于需避开浮动的块级后续兄弟元素。
clear 不是 HTML 属性，而是 CSS 属性——HTML 中从来就没有过 clear 属性。你可能混淆了早期某些编辑器或旧教程里误写的 <div clear="both"> 这类非法写法。真正的清除浮动逻辑，始终只在 CSS 层面生效。
为什么不能用 HTML 的 clear 属性？
HTML 标准（包括 HTML5）从未定义过 clear 这个全局属性。浏览器遇到 <div clear="both"> 会直接忽略它，既不报错，也不触发任何布局行为。这不是兼容性问题，是根本不存在的语法。
常见误判场景：
- 把 CSS 规则写成内联 style 时漏掉冒号，比如
style="clear both"（正确应为style="clear: both;"） - 在 JS 中尝试设置
element.clear = "both"——clear不是 DOM 元素的标准属性，读写都无效 - 用构建工具（如 Webpack + html-loader）时，模板字符串里拼错了标签，生成了看似合法实则被丢弃的
clear字段
现代 CSS 替代方案：优先用 display: flow-root
如果你的目标是让父容器自动包裹内部浮动子项（即解决“塌陷”），display: flow-root 是最直接、无副作用的替代。它专为此设计，2017 年起已全平台支持（Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+）。
立即学习“前端免费学习笔记（深入）”；
用法很简单：
.container {
display: flow-root;
}
注意点：
- 它会创建新的 BFC，天然隔离浮动影响，无需伪元素、空标签或 hack
- 它会重置相邻块级元素的 margin 合并行为，如果页面依赖外边距合并，需额外检查
- 不要和
overflow: hidden混用——后者会裁剪position: absolute子元素（如下拉菜单），而flow-root不会
当必须控制单个元素位置时，clear 仍是唯一选择
如果目标不是撑开父容器，而是让某个段落、按钮或标题“避开前面的浮动广告栏”，那 clear: both（或 clear: left）仍然是当前唯一标准、可靠的方式。
但要注意生效前提：
- 该元素必须是块级（
display: block、table等），span或em加了没用 - 它必须是浮动元素的**紧邻后续兄弟元素**；中间插一个
div或br就会失效 - 它对 flex/grid 容器内的子项无效——因为 float 在这些上下文中被忽略
- 不要写成
.parent { clear: both; }，clear作用对象永远是自身，不是父级
真正该花时间判断的，不是“怎么写好 clear”，而是“这里到底需不需要浮动”。2026 年还在用 float 做多列布局，大概率说明结构该重构了——display: flex 或 grid 下，浮动和 clear 都成了冗余概念。
