float:left使子元素脱离文档流，导致父容器高度坍缩为0，后续块级元素从顶部渲染而“塌上去”；根本原因是父容器无法感知浮动子元素的高度，非bug而是css规范设计。
float:left 为什么让后续块级元素“塌上去”
不是元素真的叠在一起，而是父容器高度坍缩为 0，后续元素从顶部开始渲染，视觉上压在了浮动元素上。打开开发者工具选中父容器，看 Computed 中的 height —— 如果是 0px 或远小于预期，基本就是这个原因。
根本原因是：float:left 让子元素完全脱离文档流，父容器失去对其高度的感知能力。它和 position: absolute 类似，只是不改变定位上下文；但和 display: inline-block 不同，后者仍参与父容器高度计算。
- 浮动元素本身还在页面上（文本会环绕），但对父容器来说“不存在”
- 背景色不显示、边框包不住内容、点击区域错位，都是同一问题的外在表现
- 这种行为不是 bug，而是 float 的原始设计目的：实现图文混排
clear:both 加在哪才起作用
clear:both 必须加在「想避开浮动影响」的那个后续兄弟元素上，而不是加在浮动元素自己身上。.float-item { clear: both; } 是无效写法——它前面没浮动元素可清。
典型场景：左侧导航栏 float:left，右侧主内容区被挤上去，这时应该给主内容区加 clear:both，让它强制换行到浮动区下方。
-
clear:left只防左浮动，对右浮动无效；clear:right同理 - 如果同时存在
float:left和float:right，必须用clear:both - 该属性只对块级元素生效；
display: inline元素加了也无效
overflow:hidden 为什么能“撑开”父容器
给浮动元素的直接父容器设置 overflow:hidden（或 overflow:auto），会触发 BFC（块级格式化上下文），让父容器重新包含内部浮动子元素的高度。
这是兼容性最好、侵入性最小的修复方式，IE6+ 全支持，也不需要额外 HTML 标签。
- 副作用是：若父容器本就需要横向滚动或显示溢出内容，
overflow:hidden会裁掉它 - 现代方案优先用
display: flow-root，语义更清晰、无裁剪风险，Chrome 64+/Firefox 58+/Safari 15.4+ 支持 - 不要用
height: auto或min-height硬撑，这无法解决塌陷本质
为什么推荐用 Flex 或 Grid 替代 float 做布局
float 本质不是为整体页面布局设计的，强行用它做两栏、三栏，等于在绕开浏览器原生布局机制，迟早踩坑。Flex 和 Grid 天然不脱离文档流，父容器高度自动包含子项，根本不存在塌陷问题。
它们还能轻松处理响应式、对齐、顺序控制等 float 完全搞不定的需求。
- Flex 适合一维布局（行或列），
display:flex+flex-wrap就能替代一堆浮动+clear组合 - Grid 更适合二维网格，比如卡片列表、仪表盘，用
grid-template-columns一行定义结构 - 老项目过渡时，可局部改用
display: flow-root，比伪元素 clearfix 更轻量
真正容易被忽略的是：很多重叠问题表面看是样式没调好，实际是布局模型选错了。float 的“修复”永远是补救，而 Flex/Grid 是从根上绕过问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
