clear作用对象是自身而非浮动元素，加在.main上使其下移避开浮动，加在.sidebar或footer无效；失效主因是元素非块级、父容器触发bfc或优先级覆盖；现代方案宜用flex或flow-root替代浮动。
侧边栏浮动后主体内容被顶到右侧、文字环绕、点击区域错位——根本不是主体内容“被影响”，而是它默认就该这么排；clear 不是修 bug，是告诉浏览器：“这里必须回到正常流底部”。
为什么 clear: both 加在主体内容上才有效
浮动元素脱离文档流，后续块级元素（比如 .main）会直接从容器顶部开始布局，而不是等浮动元素结束。这不是错，是规范行为。clear 的作用对象永远是「自己」，不是浮动元素。
- 加在浮动的
.sidebar上：完全无效，clear对已浮动元素无意义 - 加在
.main上：让它外边距上沿下移到所有浮动元素下边缘之下，从而避开重叠 - 加在
footer上：防止它卡在侧边栏半截高度处，这是最常见也最该加的位置
clear 失效的三个高频原因
写了 clear: both 却没反应？大概率掉进以下坑里：
- 目标元素是
inline或inline-block——clear只对块级盒生效，必须确保display: block或类似值 - 父容器已触发 BFC（如设置了
overflow: hidden），此时内部浮动已被包裹，clear失去作用对象 - CSS 优先级覆盖：
clear: none被更具体的选择器（如#main）设定了，需在开发者工具「Computed」中确认最终值
比 clear 更省心的现代方案
如果你只是想让侧边栏和主内容并排且互不干扰，clear 是补丁，不是解法：
- 用
display: flow-root给父容器（比如.layout）—— 它创建 BFC，自动包裹浮动子项，无裁剪副作用，Chrome 58+/Firefox 57+ 支持 - 改用
display: flex：.layout { display: flex; }+.sidebar { flex: 0 0 200px; }+.main { flex: 1; }，彻底绕开浮动逻辑 - 避免给
.main设float—— 一旦它也浮动，就得靠下一个元素来clear，链式依赖极易断裂
真正容易被忽略的是：浮动本就不该用于整页布局。它只适合图文混排这类局部场景。如果侧边栏高度远小于主内容，又坚持用浮动，那 clear 永远只能修表面，父容器塌陷、底色断层、打印错乱这些深层问题不会消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
