float:left/right 不推荐用于布局，因会导致父容器塌陷、响应式困难、兼容性问题；现仅适用于图文绕排和IE8以下兼容；Flexbox/Grid是现代替代方案。
float:left 和 float:right 为什么现在不推荐用
因为浮动元素会脱离文档流，父容器高度塌陷是默认行为，不是 bug —— 这意味着你得额外加 clear: both 或触发 BFC（比如 overflow: hidden）才能让父容器包住子元素。现代项目里，稍一嵌套就容易漏清浮，调试时看着布局“突然掉下去”，实际只是父容器没高度了。
更麻烦的是，浮动对响应式极不友好：float 本身不支持断点重排，媒体查询里要反复写 float: none + width + display 切换，维护成本高。
- IE6–8 虽支持
float，但双倍 margin bug、3px text jog 等问题至今有人踩 -
float只能左右二选一，想三栏等分或居中对齐，得靠负 margin 或 hack - Flexbox 和 Grid 已在所有现代浏览器稳定支持多年，
float基本退化为“文字环绕图片”这种单一场景的工具
如果非要用 float 实现左右两栏，必须补哪几行 CSS
核心就三点：清除浮动、设定宽度、处理父容器塌陷。缺一不可，否则右边栏会掉到下一行，或者左边栏盖住右边内容。
假设 HTML 是：
<div class="container"><br> <div class="left">左侧</div><br> <div class="right">右侧</div><br></div>
立即学习“前端免费学习笔记（深入）”；
-
.left { float: left; width: 200px; }—— 必须设宽，否则浮动后宽度由内容撑开，可能溢出 -
.right { float: right; width: calc(100% - 200px); }—— 右侧不能只写float: right，否则它会紧贴视口右边缘，和左边栏无关 -
.container::after { content: ""; display: table; clear: both; }—— 这是最稳妥的清除方式，比clear: both的空 div 更干净
float:left/right 在什么真实场景下还值得保留
目前只剩两个明确适用场景：图文混排中的文字绕图、老系统兼容性兜底。
- 文章页里
<img src="..." style="max-width:90%" alt="CSS如何实现简单的左右布局_利用float:left与float:right配合css" >让文字自然环绕图片，这是float的原始设计意图，至今无更好替代 - 维护 IE9 以下的政府/银行内网系统时，若不能引入 Polyfill，
float是唯一能稳定实现多栏的方案（但得接受盒模型 bug 和清除成本） - 千万别用
float做导航栏或卡片列表 ——display: flex一行就能对齐，float得算 margin、清浮、防换行，纯属自找麻烦
替代 float 的最简 flex 写法长什么样
左右布局用 Flex 就是三行事：容器设 display: flex，左栏设 flex: 0 0 200px（不伸缩、不压缩、固定宽），右栏设 flex: 1 自动填满剩余空间。
对应上面的 HTML，CSS 只需：
.container { display: flex; }<br>.left { flex: 0 0 200px; }<br>.right { flex: 1; }
- 不用清浮，不用算
calc()，父容器自动有高度 - 加
flex-wrap: wrap就能响应式换行；加justify-content: space-between就能左右撑开 - 所有现代浏览器（Chrome 29+、Firefox 20+、Safari 6.1+、Edge 12+）原生支持，无需前缀
实际项目里，float 的使用已经收缩到非常窄的边界。真正卡住人的，往往不是“怎么写”，而是“为什么写了却没效果”——多数时候是忘了清浮，或是父容器用了 position: absolute 导致 BFC 失效。这些细节比语法本身更耗时间。
