全浮动布局下外层容器加 margin: auto 不生效，因浮动致父容器高度塌陷，无法居中；必须用伪元素清除浮动并设置固定宽度（如 width: 960px）才能使 margin: auto 生效。
全浮动布局下外层容器加 margin: auto 不生效？
因为浮动元素会脱离文档流，导致父容器高度塌陷——此时 margin: auto 失去作用对象。浏览器根本不知道“容器有多宽多高”，自然无法居中。
- 必须先让外层容器“感知”到内部浮动内容的高度，也就是清除浮动
- 不能只靠
overflow: hidden这类副作用方案，它可能裁剪position: absolute子元素或影响滚动行为 - 推荐用伪元素清除：
::after+clear: both，兼容性好且无副作用
为什么给外层容器设固定宽度是硬性前提？
margin: auto 居中只对块级元素在**有明确宽度**时生效。如果宽度是 auto（默认），那它会撑满父容器，左右 margin 都为 0，自然不居中。
- 宽度必须是具体值，比如
width: 960px或width: 80%（百分比也行，但需确保父容器有明确宽度） - 避免用
max-width单独设置——它不替代width，margin: auto仍无效 - 响应式场景下，可用媒体查询配合不同
width值，而不是试图用fit-content混淆逻辑
清除浮动的几种写法，哪一种最稳？
核心目标是让父容器包含浮动子项，而非视觉上“清掉”浮动本身。以下三种常见方式中，伪元素法最干净：
-
.container::after { content: ""; display: table; clear: both; }—— 推荐，不影响 DOM、不新增标签、兼容 IE8+ -
<div style="clear: both"></div>插在末尾 —— 有效但污染 HTML，维护成本高 -
overflow: auto或hidden加在容器上 —— 简单，但可能意外隐藏溢出内容或禁用滚动
Flex 或 Grid 能否替代？
能，但不是“处理全浮动布局”，而是放弃浮动。如果你还在用浮动做整体布局，说明结构已过时。
立即学习“前端免费学习笔记（深入）”；
- 现代居中应直接用
display: flex+justify-content: center，无需固定宽度、无需清除浮动 - 若必须兼容 IE9 及更早版本，浮动+清除仍是现实选择，别强行套用 Flex
- 混用浮动和 Flex 容易引发意外交互，比如浮动子项在 Flex 容器里行为不可控
