clear: both 不能解决浮动塌陷因其仅控制兄弟元素排版不影响父容器高度正确方案是 clearfix 伪元素或改用 Flex/Grid 布局。为什么 clear: both 不能解决浮动塌陷浮动元素脱离文档流后父容器高度会坍缩为 0clear: both 只是让「后续兄弟元素」避开浮动对父容器自身高度无影响。它不是清除父容器内部浮动的方案而是排版控制手段。常见错误现象div 包着几个 float: left 的子项但父 div 在开发者工具里显示高度为 0背景色/边框不出现内容被压到下方。使用场景需要父容器包裹浮动子项并正确撑开高度如导航栏、卡片网格、侧边栏主内容不要在父容器上直接写 clear: both —— 它没目标可作用CSS 规则不会生效更别用空 div styleclear:both/div增加无意义 DOM影响语义和可维护性::after 伪元素 content 是最轻量的 clearfix 方案现代标准做法是用伪元素在父容器末尾插入一个清除浮动的“幽灵节点”不污染 HTML 结构兼容性覆盖 IE8。关键点在于三要素缺一不可display: table或 block、clear: both、content: 。漏掉 content伪元素根本不会渲染。立即学习“前端免费学习笔记深入”display: table 比 block 更安全避免某些旧版浏览器中 block 伪元素触发 margin 折叠必须写 content: 哪怕为空字符串写成 content: none 或省略伪元素不生成推荐加 font-size: 0 和 line-height: 0防止某些字体下伪元素产生微小行高导致额外空白/* 推荐写法 */.clearfix::after { content: ; display: table; clear: both; font-size: 0; line-height: 0;}要不要给 .clearfix 加 zoom: 1只在需要支持 IE6–IE7 时才加。它是针对 IE 的 hasLayout 触发 hack现代项目IE8 或完全不兼容 IE可安全移除。 稿定AI 拥有线稿上色优化、图片重绘、人物姿势检测、涂鸦完善等功能