浮动标签“飘”出父容器是因为float使元素脱离文档流导致父容器高度坍缩、宽度参照错乱；display: flow-root是最干净解法，创建bfc且无裁剪副作用，但需父容器有明确宽度，ie不支持。
浮动标签为什么总“飘”出父容器？
因为 float 让元素脱离文档流，父容器默认不感知它的尺寸——高度坍缩、宽度参照错乱，max-width: 100% 失效，overflow: hidden 又只裁剪不修正。这不是 bug，是 float 的原始设计逻辑：它本就为文字环绕图片服务，不是响应式布局工具。
display: flow-root 是最干净的解法
它专为解决浮动塌陷而生，创建 BFC 但不附带裁剪副作用，父容器能正确撑高、包裹浮动子元素，且保留原本的 overflow 行为（比如仍可设 overflow: visible）。
-
display: flow-root在 Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+ 均支持；IE 全系不支持 - 写法极简：
.tag-container { display: flow-root; } - 必须配合父容器有明确宽度（如
width: 100%或固定值），否则浮动标签的max-width: 100%依然无从计算 - 若需兼容 Safari 14 或更早版本，得用
@supports (display: flow-root) {}渐进增强
overflow: hidden 能用但要小心副作用
它确实触发 BFC 并让父容器“看起来正常”，但本质是“包裹 + 截断”二合一，容易掩盖真正问题。
- 会裁剪
box-shadow、transform偏移的角标、position: absolute的 tooltip —— 尤其当这些绝对定位元素的最近定位祖先不是该父容器时 - 在 iOS Safari 中可能干扰滚动行为，导致横向滑动卡顿
- 如果父容器宽度是
auto（比如没设width或max-width），overflow: hidden根本不生效，“超出”无从定义 - 别指望它修复
max-width: 100%对浮动图片的失效——它只解决高度坍缩，不解决包含块错位
老项目还得靠 clearfix
当必须兼容 IE 或无法升级 CSS 逻辑时，.clearfix::after 仍是唯一稳妥选择，但三要素缺一不可。
- 必须写
content: ""，否则伪元素不生成 - 必须设
display: table（或block），inline无效 - 必须加
clear: both，仅靠display不起作用 - 推荐完整写法：
.clearfix::after { content: ""; display: table; clear: both; } - 旧版 Safari 可能需要同时写
::before和::after才稳定触发格式化上下文
真正难处理的从来不是“怎么清浮动”，而是浮动标签里还嵌了 position: absolute 的气泡、旋转动画或 JS 动态拉出菜单——这时候 overflow: hidden 会直接切掉它们，而 display: flow-root 也救不了结构混乱的定位链。优先检查绝对定位元素的最近定位祖先是否就是你正在操作的那个父容器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
