Float使子元素脱离文档流导致父容器高度塌陷，因父容器无法感知浮动元素高度；解决方式首选触发bfc（如display: flow-root），其次伪元素清除法，避免额外空标签；现代布局应使用flexbox或grid替代float。
float 为什么会让父容器高度塌陷
给子元素设置 float: left 或 float: right 后，它会脱离文档流，父容器“看不见”它了，于是高度收缩为 0。常见现象是背景色消失、边框包不住内容。
- 这不是 bug，是 float 的原始设计目的（文字环绕图片）决定的行为
- 只要父容器内所有子元素都浮动了，且没其他非浮动块级内容，塌陷就必然发生
- 不要用
height或min-height硬撑，治标不治本
清除浮动的三种可靠方式
目标是让父容器重新“感知”浮动子元素的高度。推荐按优先级排序：
- 触发 BFC（最推荐）：给父容器加
overflow: hidden、overflow: auto或display: flow-root。其中display: flow-root语义最清晰，且无副作用（比如隐藏溢出） - 伪元素清除法（兼容性好）：在父容器末尾插入
::after，设为content: ""+display: table+clear: both - 额外空标签（不推荐）：写一个
<div style="clear:both"></div>，冗余且污染结构
float 左右混排时的顺序和宽度陷阱
浮动元素的排列依赖 HTML 顺序和可用空间，不是靠 css 控制“谁在左谁在右”的绝对位置。
- 左浮动元素从容器左边缘开始依次排列，右浮动从右边缘开始；但若左浮元素太宽，可能把后续右浮元素“挤下去”
- 所有浮动元素必须有明确宽度（如
width: 200px或flex: 0 0 33%），否则默认 100% 宽会独占一行 - 左右浮动混用时，注意它们的 margin 和 border 会影响实际占位，建议用
box-sizing: border-box统一计算逻辑
现代替代方案：float 已不适用于布局
虽然 float 在图文环绕等少数场景仍有价值，但用它做多栏布局或导航栏已过时。
立即学习“前端免费学习笔记（深入）”；
- CSS Grid 和 Flexbox 能直接控制主轴/交叉轴、对齐、换行、响应式，代码更短、意图更明确
- IE10+ 支持
display: flex，display: grid在现代项目中也基本无兼容压力 - 如果必须支持 IE9 及以下，才考虑用 float + 清除，但需同步处理各种塌陷、间隙、双倍边距等历史问题
真正需要灵活排列多个元素时，优先写 display: flex 或 display: grid —— float 的“灵活”其实是受限于文档流脱离后的不可预测性，越想控制越容易出错。