根本原因是子元素浮动脱离文档流导致父容器高度塌陷；解决关键是为每层浮动父容器主动触发BFC或使用清除技术，逐层隔离影响，而非仅清最外层浮动。
浮动布局嵌套后样式错乱，根本原因是子元素浮动脱离文档流，导致父容器高度塌陷，进而影响后续布局。解决的关键不是“清除所有浮动”，而是在需要包裹浮动子项的每一层父容器上，主动触发BFC或使用清除技术，让父级能正确计算高度、隔离内部浮动影响。
为什么嵌套后特别容易出问题
当浮动元素嵌套多层（比如侧边栏里有浮动导航，导航里又有浮动菜单项），若只在最外层清浮动，内层父容器仍可能塌陷，造成背景丢失、边框错位、兄弟元素上移等现象。浏览器不会自动向上穿透多层去“感知”浮动，必须逐层干预。
推荐做法：为每层浮动容器单独创建BFC
BFC（块级格式化上下文）是最稳定、语义清晰的解决方案，它天然包含浮动子元素，且不依赖额外标签或伪元素。常用方式：
- overflow: hidden | auto | scroll（最常用，注意避免意外裁剪）
- display: flow-root（现代标准，推荐优先使用，无副作用）
- float: left | right 或 position: absolute/fixed（会改变定位行为，慎用）
例如：
<div class="sidebar">
<div class="nav">
<div class="item">首页</div>
<div class="item">关于</div>
</div>
</div>
给 .sidebar 和 .nav 都加上 display: flow-root，两层都包裹住各自的浮动子项。
兼容老浏览器时的清除方案
若需支持 IE8+，可用伪元素清除法，但必须作用于每一层浮动容器自身：
立即学习“前端免费学习笔记（深入）”；
- 在该容器 CSS 中添加：
.container::after {
content: ""; display: table; clear: both;
} - 不要写在全局或顶层容器上——那样只清最后一层，内层仍塌陷
- 避免用
<div style="clear:both"></div>手动插入，易遗漏且污染结构
检查与验证方法
遇到错乱时，快速定位哪一层没清好：
- 用浏览器开发者工具逐层选中父容器，看 computed height 是否为 0 或远小于预期
- 临时加
outline: 1px solid red查看实际占位范围 - 确认浮动子元素是否真的被当前父容器包裹（检查 DOM 层级和 CSS 选择器范围）
不复杂但容易忽略——浮动影响只发生在“直接父容器”，必须一层一层“收口”。
