浮动导致父容器塌陷需触发BFC，如overflow:hidden；左右栏高度不一致会引发错位，纯float无法等高；响应式下float清除易混乱，现代布局应优先用flex或grid。
float左右浮动后元素塌陷怎么办
直接给左右两个盒子分别加 float: left 和 float: right，父容器高度会变成0——这不是bug，是浮动的天然行为：浮动元素脱离文档流，父容器“看不见”它们了。
- 必须在父容器上触发BFC（块级格式化上下文），最简单的是加
overflow: hidden或overflow: auto - 别用
clear: both清除浮动来撑高父容器，它只作用于后续兄弟元素，对父容器自身高度无效 - 如果父容器有固定高度或设置了
min-height，塌陷可能被掩盖，但实际布局仍脆弱
左右两栏内容高度不一致时，右边栏被顶下来了
这是浮动布局最典型的视觉断裂：当左栏内容比右栏长，右栏的浮动元素会在左栏底部“找位置”，结果卡在左栏下方空白处，而不是和顶部对齐。
- 确保左右两栏都从同一基准线开始浮动，即它们在HTML中是同级兄弟元素，且没有意外的
margin-top或padding-top - 右栏不能依赖左栏高度做定位，
float: right是相对于**包含块**的右边界对齐，不是相对于左栏 - 若需等高效果，纯float做不到，得靠额外手段（如伪元素占位、js计算、或换flex）
float布局在响应式场景下为什么很难收场
一旦加了媒体查询想让两栏变单栏，float 的清除逻辑容易混乱，尤其当不同断点下清除方式不一致时，会出现残留偏移或重叠。
- 移动端改单栏时，务必同时重置：
float: none+width: 100%+ 清除之前可能存在的clear - 不要只写
float: none就以为万事大吉，旧的margin或width可能还在干扰流式布局 - IE8及以下对
float+min-width组合支持差，如果还要兼容，得额外测试宽度收缩临界点
现在还该用float做两栏吗
除非维护老项目或需要兼容IE6–8，否则不建议。现代浏览器里，float 做布局属于“能跑通但随时会绊倒”的方案。
-
display: flex一行代码就能解决对齐、等高、响应式换行，且无塌陷问题 -
grid更适合复杂二维布局，但两栏场景略杀鸡用牛刀 - 如果只是文字环绕图片，
float依然合理——那是它的原始设计用途，不是布局用途
真正难处理的从来不是怎么让左右浮起来，而是浮起来之后，怎么让整个页面不跟着一起飘走。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
