display: flow-root 是首选方案，因其专为解决浮动塌陷而设计，一行代码创建bfc使父容器包含浮动子元素，不裁剪溢出内容、不干扰定位，chrome 64+等现代浏览器全面支持。
直接用 display: flow-root 就能解决绝大多数浮动导致的布局错乱，不用写伪元素、不裁剪内容、一行代码生效。
为什么 display: flow-root 是首选
它专为解决浮动塌陷而设计：创建一个新的块级格式化上下文（BFC），让父容器重新包含所有浮动子元素，同时不干扰溢出内容（比如 position: absolute 下拉菜单、box-shadow 或 transform 位移后的视觉区域）。
- Chrome 64+、Firefox 58+、Safari 15.4+ 全面支持，现代项目可放心用
- 比
overflow: hidden安全——后者会意外裁剪弹层、阴影、动画位移部分 - 比伪元素
.clearfix::after简洁——不用记content: ""和display: block的组合规则 - 不会像给父元素加
float或display: inline-block那样破坏居中或触发怪异行内行为
clear: both 加在哪才有效
clear: both 不是万能胶，只对「紧挨着它的前一个浮动兄弟元素」起作用，且目标元素必须是块级、已渲染、未被隐藏。
- 加在浮动元素自己身上？无效——
float和clear同时存在时，clear被忽略 - 加在浮动元素前面的空
<div> 上？白加——它前面没浮动元素可清 <li>正确位置：浮动容器之后的下一个块级元素上，比如 <code><footer></footer>或<section></section> - 如果该元素是
inline（如<span></span>），得先加display: block，否则clear不生效 - 必须有
content: ""——没有内容，伪元素根本不会生成 - 必须设
display: block（或table）——inline元素无法触发clear - 父容器不能是
display: flex或grid——此时浮动本身已失效，clear失去意义 - 嵌套浮动时，每一层浮动容器都要单独加
.clearfix，影响不会穿透层级 - 表单：清除动作要落在最小包裹单元上，比如每个
.form-group，而不是整个<form></form> - 无序列表横向排列：给
<ul></ul>加display: flow-root，别只清<li> - 卡片网格：若用
float: left实现，确保每行最后一张卡后没有隐藏换行符或空格，否则可能换行错位 - 响应式断点下浮动失效？大概率是媒体查询里宽度计算偏差了小数像素，建议直接切到
display: flex或grid
伪元素清除法（.clearfix::after）怎么写才不出错
老项目兼容 IE11 或旧 Safari 时仍需用它，但漏掉任一关键声明就会失效。
表单、列表、卡片这些常见场景怎么清
浮动用在表单字段、横向列表、多列卡片时，塌陷表现不同，但根因一致：父容器高度为 0。
真正容易被忽略的是：浮动影响只存在于当前 BFC 内，父容器用了 flow-root，不代表子容器自动继承——子容器里再浮动，还得自己清。
