父容器高度塌陷是 float 脱离文档流的必然结果，非 bug；clear: both 仅避开紧邻前一个浮动元素，非清空所有浮动；解决首选 display: flow-root 创建 bfc，兼顾兼容与无副作用。
父容器高度塌陷是必然结果，不是 bug
只要子元素全设了 float: left 或 float: right，父容器就会“看不见”它们的高度，计算出的高度为 0。这不是写错了，而是 float 的设计机制：脱离文档流后，父容器的 height 就不再包含这些子元素。
常见表现包括：.container 的 background-color 消失、border 缩成一条线、后续的 .footer 直接顶到顶部。
- 别用
height: 200px硬撑——内容一变就崩，且破坏响应式 - 慎用
overflow: hidden——它虽能触发 BFC 清除塌陷，但会裁剪position: absolute下拉菜单、box-shadow、transform 偏移后的内容 - 首选
display: flow-root——一行 CSS 创建 BFC，无副作用，Chrome 64+/Firefox 61+/Safari 15.4+ 全支持 - 兼容 IE11？改用伪元素
.clearfix::after，但必须写全：content: ""+display: table（或block）+clear: both
clear: both 不是万能清浮，只对前一个浮动兄弟生效
clear: both 的作用不是“清空所有浮动”，而是让当前元素的上边界避开**紧邻的前一个浮动兄弟元素**。如果该元素自己也 float 了，或者被 display: none 隐藏但样式还在，clear 就完全无效。
典型失效场景：
- 写了
clear: both却没反应——检查这个元素是否仍是块级、是否渲染、是否在同一个 BFC 内 - 父容器用了
display: flex或grid——此时子元素设float基本失效，clear自然也失去意义，直接删掉浮动相关样式 - 浮动元素后跟的是
inline元素（比如span）——clear对 inline 元素不生效，必须作用于块级元素
float: left 和 float: right 混用时宽度容错极低
左右浮动并排布局看似简单，但实际极易因像素级误差换行。浏览器对盒模型的四舍五入、字体缩放导致的行高微变、甚至 HTML 中的空格/换行符，都可能让总宽超限，把右边元素“挤”到下一行。
实操要点：
- 必须设
box-sizing: border-box——否则width: 50%+padding: 10px实际占满 50% + 20px，大概率溢出 - 浮动元素总宽（含 margin、border、padding）要 ≤ 父容器宽度，建议预留至少 1px 容错空间
- 避免给左浮动元素设
margin-left（IE6 会双倍边距），改用margin-right分隔更安全 - 更稳方案：直接换
display: flex+justify-content: space-between，绕过 float 宽度计算陷阱
文字环绕失控常被误认为“需要 clear”，其实是 BFC 缺失
图片 float: left 后，紧接着的 <p></p> 文字自然环绕；但如果后面还有 <h3></h3>、按钮或卡片，它们也跟着绕，就乱套了。这不是 clear 没加够，而是这些后续元素和浮动元素处在同一个 BFC 里，文本流被持续影响。
解决逻辑：
-
clear: both只能阻止当前块级元素“上边缘”进入浮动区域，无法阻断后续文本流的环绕行为 - 真正有效的是给文字容器自身创建 BFC：
overflow: hidden或display: flow-root，天然隔离环绕范围 - 记住：
clear是“避开浮动”，不是“结束环绕”；要终止环绕，得靠 BFC 边界
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
