清除浮动最稳妥方案是给父容器加.clearfix类，需确保::after伪元素正确生成（content:""必写）、display:table比block更稳、且必须作用于直接包裹浮动子项的父容器；现代项目可优先用display:flow-root或flex/grid布局替代。
直接给父容器加 .clearfix 类是最稳妥的清除浮动方案，但必须确保伪元素写法正确、作用位置准确，否则毫无效果。
为什么 clear: both 单独写在父容器上没用
因为 clear 只控制「自身」不与浮动元素同行，它不参与父容器的高度计算。父容器塌陷的本质是脱离文档流，不是“没清干净”。
-
clear: both写在父元素上：对父元素自身无效（它又没浮动） - 写在浮动子元素上：只能让该子元素换行，不解决父容器高度归零问题
- 真正起效的是在父容器末尾「插入一个参与文档流的块级占位」，再让它
clear: both
.clearfix::after 必须这样写才可靠
标准写法不是可选，而是浏览器渲染机制决定的——少一个属性都可能失效。
-
content: ""必须存在，否则伪元素不生成，display和clear都白设 -
display: table比block更稳：它能触发 BFC，同时避免 IE6/7 的 margin 双倍问题 - 不能只写
display: block; clear: both：在部分老浏览器中，block无法撑开父容器高度 - 必须加在「直接包裹浮动子项」的父容器上，套多一层或漏一层都不行
现代项目里要不要还用 clearfix
要看兼容目标和上下文。它不是过时，而是适用场景变窄了。
- 如果项目支持 Chrome 58+ / Firefox 57+ / Safari 15.4+，优先用
display: flow-root——零冗余、无副作用、语义清晰 - 若需兼容 IE11 或旧版 Safari，
.clearfix仍是事实标准，但记得补*zoom: 1兜底 IE6/7 - 遇到第三方组件或 CMS 输出的 HTML 里有
float，别急着重构，先加.clearfix快速修复 - 正在写新布局？直接用
display: flex或display: grid，根本不会触发塌陷
调试时最常忽略的三个点
很多问题不是写法错，而是被细节卡住。
- DevTools 默认不显示
::after，Chrome 要勾选 “Show user agent shadow DOM” 才能看到伪元素是否渲染 - 父容器如果写了
height或min-height，会覆盖 clearfix 带来的高度计算，得先检查这些显式值 - 多个嵌套浮动层时，每一级「包含浮动子项」的容器都得单独加 clearfix，外层加了不代表内层自动生效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
