clear属性仅作用于浮动元素的同级后续块级兄弟元素，用于控制其起始位置，而非修复错位或撑开父容器；它对浮动元素自身和父容器无效，且不能解决父容器塌陷问题。
clear 不是用来“修复错位”的工具，而是用来控制元素“从哪一行开始”的定位指令。错位本身往往不是 clear 没加对，而是加错了对象、加错了位置，或者根本没解决父容器塌陷这个根源问题。
clear 属性该加给谁？加在哪一行？
clear 只对块级元素生效，且只影响它自己的起始位置——它不会拉高父容器，也不会调整浮动元素本身。
- 不能加在浮动元素自己身上，比如
.sidebar { float: left; clear: both; }，完全无效 - 应该加在需要回到正常流底部的后续兄弟元素上，例如两栏浮动后，主内容区要换行显示，就给它加
clear: both - 多列布局中，每行首列用
.col:nth-child(3n+1) { clear: left; }更精准；全用clear: both会导致每列都独占一行
父容器高度塌陷才是错位的真正源头
浮动子元素脱离文档流，父容器计算高度时直接“看不见”它们，结果就是背景不显示、边框包不住、页脚往上跑——这不是子元素错位，是父容器“没站稳”。
-
overflow: hidden能触发 BFC 让父容器包含浮动子元素，但会裁剪position: absolute的下拉菜单、tooltip 或横向滚动条 - 伪元素方案最稳妥：
.container::after { content: ""; display: block; clear: both; }，再补一句.container { zoom: 1; }兼容 IE6/7 - 现代项目可直接用
display: flow-root，语义清晰、无副作用，但 IE 完全不支持
为什么加了 clear 还错位？先检查这几点
即使用了 clearfix 或 flow-root，视觉错位仍可能发生，干扰源往往藏在别处：
- 父容器自己也设置了
float或position: absolute/fixed，整棵树都脱离了文档流 - 子元素宽度总和超 100%，尤其用了
box-sizing: content-box时，padding和border会让实际占用变宽，触发换行挤偏 - 浮动子元素高度不一致，
clear只管“起始位置”，不管“结束高度”，右侧块可能被卡在左侧高块中间 - 浏览器开发者工具里选中错位元素，看 Computed 面板中的 bounding box 是否与视觉位置重合；不重合说明仍有脱离流的干扰源
真正难处理的不是 clear 本身，而是浮动布局中多个脱离流层级叠加后的连锁反应——单靠一个 clear: both 很难兜底，得一层层查 DOM 结构和 computed 样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
