浮动嵌套时子元素不随父容器高度变化，本质是父容器未触发bfc且float元素脱离文档流；推荐用display:flow-root解决，兼容ie则用clearfix伪元素清除。
浮动嵌套时子元素不跟随父容器高度
这是最常被误认为“父容器塌陷”的现象，本质是父容器没触发 BFC，且内部 float 元素脱离文档流。单纯给父容器加 overflow: hidden 能“撑开”高度，但会意外裁剪 position: absolute 子元素或阴影溢出部分。
- 推荐优先用
display: flow-root—— 专为解决此问题而生，无副作用，现代浏览器全覆盖（Chrome 64+、Firefox 58+、Safari 15.4+） - 若需兼容 IE，用
::after伪元素清除：父容器加clearfix类，CSS 中定义.clearfix::after { content: ""; display: table; clear: both; } - 避免在浮动嵌套中混用
flex或grid父容器——它们本身已建立 BFC，再套浮动反而增加理解成本和调试难度
多层浮动嵌套后清除位置选错导致布局断裂
清除浮动（clear）不是“越靠后越保险”，而是必须紧贴**需要避开浮动影响的那一个元素**。比如三列浮动布局中，右侧栏下方有个页脚，很多人习惯给页脚加 clear: both，但如果中间栏用了浮动且高度不固定，页脚可能被卡在中间栏右侧空白处下方，而非整个三列底部。
- 清除点应放在**视觉上需要换行的位置之后第一个非浮动块级元素**上，而不是笼统地“清到底部”
- 嵌套层级越深，越要检查每一层父容器是否已建立 BFC；否则子层清除对父层无效
- 用 DevTools 的 Layout 面板查看盒模型，重点观察
offsetHeight和getBoundingClientRect()返回值差异，能快速定位哪一层没撑开
浮动 + margin 折叠引发的意外间隙
当浮动元素与相邻块级元素之间存在 margin，尤其在垂直方向，容易因外边距折叠（margin collapse）产生不可预期的空隙——这不是浮动特有，但在浮动嵌套中更难排查，因为开发者常默认“浮动元素不参与文档流，所以不会折叠”，其实它仍会影响邻近非浮动块的折叠行为。
- 浮动元素自身不参与外边距折叠，但它旁边的普通块级元素仍会和其上方/下方其他块发生折叠
- 典型场景：浮动侧边栏 + 主内容区（
margin-top: 20px），若主内容上方还有标题，这个20px很可能被折叠掉 - 破除折叠最稳妥方式是让主内容区触发 BFC：
overflow: hidden或display: flow-root，而非盲目加大 margin
IE8–IE11 中双浮动嵌套的 hasLayout 失效
IE 旧版本依赖 hasLayout 属性控制尺寸计算，而浮动本身会触发它，但嵌套两层以上浮动时，内层浮动容器若未显式设置 zoom: 1 或 height，就可能丢失 layout，表现为内容溢出、背景不渲染、clear 失效。
- 给所有浮动容器（尤其是嵌套中的中间层）加
zoom: 1是兼容性兜底最简方案 - 避免在 IE 中对浮动元素使用
min-height—— 它不触发 hasLayout，改用height: auto配合zoom: 1 - 如果项目已放弃 IE8–9，只需关注 IE10–11 的
display: inline-block在浮动上下文中的基线对齐偏移问题，此时加vertical-align: top更有效
浮动嵌套真正难的不是语法，而是每一层“谁负责包裹、谁负责清除、谁该触发 BFC”之间的责任划分。一旦某一层边界模糊，后续所有 margin、padding、定位都会开始漂移——这种问题往往在改完一个像素后才暴露，而且只在特定数据长度下复现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
