Float侧边栏固定宽度后主内容不占满剩余空间，因浮动元素脱离文档流，主内容需触发bfc（如overflow:hidden）才能自动避开浮动区域并占据剩余宽度。
float 侧边栏固定宽度后，主内容不占满剩余空间？
因为 float 会把元素从文档流中“抽走”，如果主内容没触发 BFC 或没清除浮动，它会无视浮动区域，直接从父容器左上角开始渲染，看起来像被侧边栏“盖住”或“叠在一起”。
常见错误现象：margin-left 写死像素值（比如 margin-left: 200px），但侧边栏实际宽度因 padding/border/border-box 设置不同而变化，导致错位；或者主内容高度不够时，底部被浮动元素顶起。
- 用
overflow: hidden或display: flow-root给主内容容器触发 BFC，让它自动避开浮动区域 - 侧边栏固定宽度推荐写成
width: 200px，同时明确设置box-sizing: border-box，避免 padding 撑宽 - 主内容不用设宽度，BFC 触发后它会自然占据“剩余宽度”，响应式下也依然成立
IE8–IE9 中 float 侧边栏换行错乱？
老版本 IE 对 float 和 display 的解析有偏差，尤其当父容器没设 zoom: 1（触发 hasLayout）或子元素存在内联样式干扰时，浮动元素可能意外换行、宽度计算错误。
使用场景：需要兼容 IE9 及以下的内部管理系统，不能用 flex/Grid。
立即学习“前端免费学习笔记（深入）”；
- 给浮动侧边栏加
display: inline（IE 专供 hack，现代浏览器无影响） - 父容器必须加
zoom: 1或*zoom: 1（针对 IE6–7） - 避免在浮动元素上用
margin-right: auto或width: calc(100% - 200px)，IE8 不支持calc()
浮动侧边栏和 sticky 定位冲突怎么办？
position: sticky 在父容器是 float 元素时会失效——因为 sticky 的“容器”是最近的具有滚动约束的块级祖先，而浮动元素不构成这样的容器。
典型场景：想让侧边栏随页面滚动但始终可见，又想用 float 实现基础布局。
- 不要把
sticky直接加在float元素上，它会被忽略 - 改用包裹一层非浮动容器：
<div class="sidebar-wrapper"><aside class="sidebar">...</aside></div>，对 wrapper 设float，对 sidebar 设position: sticky - 确保 wrapper 有明确高度或包含内容，否则 sticky 无参考滚动边界
float 布局下 margin 折叠和清除浮动的坑
浮动本身不会引发外边距折叠，但清除浮动的方式选错，会让后续元素的 margin-top 突然失效或叠加——尤其是用 clear: both 的空 div 时，它会把上面所有浮动“压”下来，破坏原有垂直节奏。
性能影响：clear 是重排操作，频繁触发会影响渲染效率；现代项目中更推荐用 BFC 替代清除。
- 别用
<div style="clear:both"></div>收尾，改用父容器overflow: hidden或display: flow-root - 如果必须用 clear，确保它紧跟在浮动元素之后，且不带任何 margin/padding 干扰
- 侧边栏和主内容之间想留间隙，优先用
margin-left加在主内容上，而不是靠margin-right推侧边栏——后者在 RTL 布局或缩放时容易出问题
浮动实现自适应侧边栏的关键不在“怎么浮”，而在“怎么让主内容真正识别浮动后的可用空间”。很多问题其实不是 float 本身的问题，而是忘记它已脱离文档流这个前提。