Float不推荐用于布局因其本意是图文环绕，强行布局会引发bfc触发、清除浮动、父容器塌陷等问题，导致高度为0、错行、溢出等；现代应优先使用flex、grid或table布局。
float左右布局为什么现在不推荐用了
因为 float 本意是让文字环绕图片，不是为页面布局设计的。强行用它做双栏，会触发 BFC、清除浮动、父容器塌陷这些连环问题，调试起来像在解谜。
常见错误现象：父容器高度为0、右侧栏掉到下一行、内容溢出看不见、打印样式错乱。这些都不是“没写对”，而是“用错了地方”。
如果你只是想快速搭个静态双栏页且兼容 IE8，它还能凑合；但只要加点交互、响应式或后续要维护，就立刻变成技术债。
float:left + float:right 的最小可行写法
真要用，就别套多余 wrapper，直接控制两个块级元素：
立即学习“前端免费学习笔记（深入）”；
-
left和right元素都设float: left（别用right，否则在 RTL 页面会翻车） - 给
left设固定宽度（比如width: 200px），right用width: calc(100% - 200px) - 父容器必须清除浮动：加一个
div且设clear: both，或者用::after伪元素（更干净）
示例关键代码：
section { overflow: hidden; } /* 触发BFC，替代 clear */ .left { float: left; width: 200px; } .right { float: left; width: calc(100% - 200px); }清除浮动的三种写法，哪一种最稳
不是所有清除方式都等价。IE8 要求必须触发 hasLayout，现代浏览器则更在意语义和可维护性。
- 用
clear: both的空标签（<div style="clear:both"></div>）——最直白，但污染 HTML 结构 - 父容器设
overflow: hidden或overflow: auto——简洁，但可能意外裁剪position: absolute子元素或遮住阴影 - 伪元素清除：
section::after { content: ""; display: table; clear: both; }——推荐，不影响布局，兼容性好（IE8+）
比 float 更靠谱的三个替代方案
现在写双栏，优先考虑这些：
-
display: flex：父容器设display: flex，子项自动并排，flex: 1控制自适应，无塌陷问题 -
display: grid：两列布局一行代码搞定：grid-template-columns: 200px 1fr，响应式也方便 - 纯 css 的
display: table：兼容 IE8，但语义上不算“表格”，只是借用渲染模型，缺点是不能用margin控制间距
真正容易被忽略的是：float 布局下，margin 折叠、vertical-align 失效、min-width 行为异常这些问题，往往要等到改需求时才暴露出来。