float会导致父容器高度塌陷，因子元素脱离文档流；可靠清除方式是触发bfc，如display: flow-root或clearfix伪元素（需content:""和display:table）；现代布局应优先使用flexbox或grid。
float 会让父容器高度塌陷，这是最常踩的坑
只要子元素用了 float，父容器默认就“看不见”它们的高度，表现为高度变成 0 —— 看得见内容，但背景色、边框、后续兄弟元素位置全乱。这不是 bug，是 float 的原始设计逻辑：它本就该脱离文档流，让文字绕排。
- 典型现象：
div包着几个float: left的img或aside，结果父div没有高度，下面的footer直接叠上来了 - 别用
height硬撑，那只是掩盖问题；也别依赖overflow: hidden当万能解，它可能意外裁剪阴影、下拉菜单或定位元素 - 真正可靠的清除方式是触发 BFC（块级格式化上下文），比如：
display: flow-root（现代推荐）、overflow: auto（兼容性好）、或伪元素清除法
clearfix 伪元素写法必须带 content 和 display
很多人复制粘贴 .clearfix::after 代码却无效，八成是因为漏了关键两行：content 为空字符串，display 不是 block 或 table —— 浏览器不会渲染没内容又不占布局的伪元素。
- 正确最小写法：
.clearfix::after { content: ""; display: table; clear: both; } -
content: ""缺失 → 伪元素不生成；display: block虽能清浮动，但可能引发 margin 合并问题，table更稳妥 - 别在
::before上清浮动，它插在内容前，对父容器高度无影响
float + inline-block 混用时，空白符会变成真实间距
当 float 元素旁边放 display: inline-block 元素，或者多个 inline-block 并列时，HTML 中的换行和空格会被渲染成约 4px 的间隙 —— 这和 float 本身无关，但常被误认为是浮动导致的错位。
- 现象：三列布局里，两列
float: left，一列inline-block，右边总多出几像素空隙 - 解决方向有两个：
font-size: 0在父容器上消灭空白字符宽度，子元素再单独设字体大小；或直接把 HTML 标签写成连写（<div></div> <div></div>不换行） - 注意：
vertical-align: top对inline-block是必要的，否则默认按 baseline 对齐，看起来像错位
现代布局中，float 已不该用于整体页面结构
Flexbox 和 Grid 出来后，float 的语义已退回到“图文混排”这种窄场景 —— 比如让一张图左浮动，文字环绕它。拿它做导航栏、三栏布局、响应式栅格，等于主动给自己埋兼容性和维护债。
- IE10+ 都支持
display: flex，float布局在移动端缩放、断点切换时极难控制 - 如果必须兼容老 IE（比如 IE8），优先用
display: inline-block+zoom: 1触发 hasLayout，而不是硬扛float清除链 - 一个信号：当你开始写第 3 个
clearfix类，就该停下来想——这结构是不是早该用flex重写了？
float 的清除逻辑看似简单，但每个修复方案背后都牵扯渲染模式、BFC 触发条件、甚至 HTML 解析规则。最容易被忽略的是：清除浮动不是目的，让父容器正确参与文档流才是。一旦忘了这点，就会陷入加一层 overflow、再加一层 after、最后用 position 硬拉的循环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
