清除浮动后才能居中，因浮动使父容器塌陷致高度为0，margin: auto等居中失效；需用.clearfix::after{content:"";display:table;clear:both}触发bfc，再依场景选居中方案。
浮动元素导致父容器塌陷，就别指望用 margin: auto 或 text-align: center 居中了——父容器高度是 0，居中根本无从谈起。必须先清除浮动，再谈居中。
为什么清除浮动后才能居中
浮动元素脱离文档流，父容器计算高度时直接忽略它们。结果就是：背景色消失、边框不显示、后续内容上移，更关键的是——你设了 margin: 0 auto 却没效果，因为那个“块级元素”实际没被父容器包裹，它甚至可能溢出到视口外。
- 常见错误现象：
div包着几个float: left的子项，父div背景全黑却看不见，里面文字却正常显示 - 居中失效的根源不是写错 CSS，而是父容器根本没高度，
auto无空间可分 - 哪怕用了
flexbox或grid做居中，如果父容器因浮动塌陷而尺寸异常，布局照样错乱
clearfix 伪元素法是最稳妥的清除方式
现代项目首选 .clearfix::after，它不污染 DOM，兼容 IE8+，且能稳定触发 BFC，让父容器正确包含浮动子项。
- 必须写成：
.clearfix::after { content: ""; display: table; clear: both; }——缺一不可 -
display: table比block更可靠：它天然创建 BFC，且不会继承line-height导致额外空白 - IE8 及以下需用单冒号写法：
.clearfix:after；IE6/7 还得加zoom: 1触发 hasLayout - 不要只写
content: ""不设display，否则伪元素不参与布局，clear: both彻底失效
居中要分清场景：清除浮动后选对方案
清除浮动只是前提，居中本身还得看元素类型和布局目标：
- 单个块级子元素水平居中：
margin: 0 auto+ 明确width（注意：父容器必须有宽度或已撑开） - 多个浮动子项整体居中（如导航菜单）：给父容器设
text-align: center，子项用display: inline-block替代float更可控 - 需要水平+垂直居中（比如弹窗、登录框）：清除浮动后，在父容器上用
display: flex; justify-content: center; align-items: center - 响应式场景下慎用
overflow: hidden清除浮动——它可能意外裁剪下拉菜单或 tooltip 等溢出内容
容易被忽略的细节：float 和 clear 的作用边界
clear 不是“清除浮动属性”，而是让当前元素避开前面浮动元素占据的空间；它只对块级元素生效，且必须用在浮动元素之后的兄弟节点上。
- 错误写法：
div.float-left { float: left; clear: both; }——这会让它自己跳到下一行，还浮不起来 -
clear: both必须加在最后一个浮动元素的后面，不能加在父元素上，也不能加在浮动元素自身 - Flex 或 Grid 子项无视
float和clear，两者混用会失效——一旦用了display: flex，就别再给子项设float - 图文混排仍适合用
float（如图片左浮、文字环绕），但此时清除浮动的目标通常是段落末尾的占位，而非整个页面容器
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
