height:100%在浮动侧边栏中无效，因浮动导致父容器高度塌陷为0；应改用min-height:100vh、flex/grid布局或position:fixed来实现视口等高。
height:100% 在浮动侧边栏里为什么不起作用
因为 height:100% 是相对于父容器计算的，而浮动元素（float: left 或 right）会脱离文档流，导致父容器高度塌陷——父容器实际高度变成 0，子元素的 100% 自然也是 0。
常见错误现象：background-image 只显示一截、侧边栏背景图突然“消失”、右侧内容区上移覆盖侧边栏。
- 必须给父容器设置明确高度（如
min-height: 100vh），或改用非浮动布局 - 清除浮动（
clear: both）只解决后续元素错位，不恢复父容器高度 - 如果父容器本身没设高，
height:100%永远无效，和有没有clear无关
用 float + background-image 做侧边栏的实操要点
不是不能用浮动，而是得接受它的限制：它适合“高度已知”或“内容驱动高度”的场景，不适合撑满视口。
- 侧边栏容器需设固定宽 +
float: left，背景图用background-size: cover防止拉伸变形 - 主内容区用
overflow: hidden（触发 BFC）替代clear，更稳妥地避开浮动影响 - 若要背景图随滚动始终可见，加
background-attachment: fixed，但注意 Safari 对浮动元素的支持不稳定 - 避免对浮动侧边栏直接设
height: 100%；改用min-height: 100vh更可靠
aside {
float: left;
width: 240px;
min-height: 100vh;
background-image: url("sidebar-bg.jpg");
background-size: cover;
background-attachment: fixed;
}
清除浮动本身不能让 height:100% 生效
clear 只是让元素避开浮动区域，不影响父容器高度计算。很多人误以为加了 ::after { content:""; display:table; clear:both; } 就能“修复”高度，其实只是清除了后续元素的浮动干扰。
立即学习“前端免费学习笔记（深入）”；
- 这个伪元素确实能撑开父容器（因
display: table会生成匿名盒子），但属于副作用，不可靠 - 现代项目中，优先用
display: flex或display: grid替代浮动布局，语义清晰且高度自动匹配 - 如果必须兼容老浏览器，用
overflow: hidden或display: flow-root（IE 不支持）代替 clearfix
真正撑满视口的侧边栏该怎么做
浮动 + height:100% 是个过时组合。现在更合理的方式是脱离文档流控制，比如绝对定位或 Flex 布局。
- 用
position: fixed最简单：侧边栏脱离文档流，top: 0; bottom: 0; left: 0;直接占满视口左侧 - Flex 布局更可控：父容器
display: flex，侧边栏设flex: 0 0 240px，主内容区flex: 1，天然等高 - Grid 方案也行：
grid-template-columns: 240px 1fr，配合min-height: 100vh即可 - 所有这些方式下，
background-image都能自然铺满，无需纠结清除浮动
height:100% 这条路，本质是在用布局机制的缺陷去凑功能。真正难的不是写对那几行 CSS，而是判断什么时候该换思路——比如发现要反复 hack 父容器高度、或者 background-attachment: fixed 在 iOS 上失效，基本就是该放弃浮动的时候了。 
