clear: both 失效是因为它只避开紧邻上方的浮动元素，无法约束同级其他浮动；overflow: hidden 会裁剪溢出的右浮动内容；推荐用 display: flow-root + 伪元素兜底，兼顾现代与兼容性。
同向浮动和反向浮动混用时，clear: both 为什么失效？
因为 clear 只作用于「当前元素自身」，它阻止的是该元素**紧邻上方的浮动元素**对其位置的影响，而不是“清空所有浮动状态”。当父容器内既有 float: left 又有 float: right 的子元素时，它们在文档流中仍属同一层级，clear: both 放在某个子元素上，只能让它避开**前一个浮动元素**（比如左边那个），但对右边那个没约束力——尤其当右边浮动元素实际渲染位置更靠前时，clear 就完全不生效。
父级用 overflow: hidden 会截断右浮动内容
这是真实踩坑点：给父容器设 overflow: hidden 确实能触发 BFC、包裹住浮动子元素，但它对「超出父容器宽度的右浮动元素」会直接裁剪。例如父宽 400px，一个 float: right; width: 200px; 的盒子若因 margin 或 padding 导致其右边缘超出父容器边界，就会被切掉一部分甚至整个消失。
- 只适用于子元素宽度总和 ≤ 父容器宽度的场景
- 若存在响应式缩放或动态内容插入，容易意外溢出
- 无法配合
position: absolute子元素使用（absolute 元素不参与 BFC 高度计算）
推荐用 display: flow-root + 伪元素兜底
display: flow-root 是现代解法，它创建独立的块级格式化上下文，天然包含所有浮动子元素，且不会截断内容、不影响绝对定位子项。但它在 IE 和部分旧版 Safari 中不支持，所以需搭配伪元素 fallback：
.clearfix {
display: flow-root;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
这样写，新浏览器走 flow-root，老浏览器退回到 ::after 清除逻辑，无需额外 HTML 标签，也避免了 zoom: 1 这类 IE 专属 hack。
反向浮动布局下，别依赖 clear 属性控制顺序
当同时存在 float: left 和 float: right，它们的渲染顺序取决于 HTML 结构先后，不是 CSS 书写顺序。比如：
<div class="left"></div> <div class="right"></div>
即使 .right 在 CSS 里写在前面，它依然会出现在 .left 右侧——因为 DOM 顺序决定浮动锚点。此时想让某元素“压到底部”，clear: both 没用，得改用 flex 或 grid 布局重写结构。
真正麻烦的不是怎么清浮动，而是意识到：一旦左右浮动混用，就等于主动放弃对流式布局的可控性。现在该考虑的不是清除技巧，而是是否还值得继续用 float。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
