float布局中右栏掉到下一行是因右栏未触发BFC导致文字绕行至左栏下方，需用伪元素清除浮动或改用flex布局。
float 布局为什么右栏总掉到下一行
这不是浏览器 bug，是 float 脱离文档流的必然结果：右栏没触发 BFC，文字会“绕行”到左栏下方。常见表现是 margin-left 写了但没用、右栏背景色只显示半截、高度塌陷导致父容器边框消失。
- 左栏必须设
float: left+ 明确宽度（如width: 200px），不能只靠内容撑开 - 右栏不能浮动，否则两栏都脱离流，顺序不可控；应设
margin-left: 200px或overflow: hidden触发 BFC - 父容器必须清除浮动，推荐用伪元素：
.container::after { content: ""; display: table; clear: both; }，比overflow: hidden更安全——后者可能意外裁剪box-shadow或position: absolute子元素 - 如果右栏含长英文/数字无空格（如 URL、token），需加
word-break: break-word，否则溢出容器
float 布局中 left 和 right 的顺序怎么写才对
HTML 结构必须左栏在前、右栏在后，float: left 和 float: right 混用极易错位——尤其当父容器宽度不足时，float: right 会跳到上一行最右端，造成视觉断裂。
- 只用
float: left：左栏float: left，右栏不浮动、靠margin-left推开，结构稳定 - 避免
float: right：它依赖父容器剩余空间计算，响应式下极易换行；若真要用，右栏 HTML 必须写在左栏前面，违反语义直觉 - 清除元素必须紧跟在最后一个浮动元素之后，且是块级兄弟元素，写成
<div style="clear: both"></div>放在两栏后面，不能塞进父容器内部或加在浮动元素自身上
响应式切换时 float 布局容易崩在哪
媒体查询里只改 float: none 不够，width、margin、clear 全得同步重置，否则窄屏下两栏叠在一起或留白错乱。
- 移动端切单列时，左右栏都要设
float: none+width: 100%+clear: both - 如果原布局用了
overflow: hidden清浮动，媒体查询里也要显式重置为overflow: visible，否则旧规则残留影响布局 - IE8–9 需额外加
zoom: 1触发 hasLayout，否则伪元素清除可能失效 - 安卓 WebView 和 iOS Safari 对
overflow: hidden的实现有差异，建议统一用伪元素清除法
flex 替代 float 后哪些细节反而更易漏
flex 看似简单，但左栏用 width: 200px 而不是 flex: 0 0 200px 是高频翻车点——前者在窄屏下仍可能被压缩，尤其左栏带 padding 或 border 时。
立即学习“前端免费学习笔记（深入）”；
- 左栏务必用
flex: 0 0 200px，等价于flex-grow: 0; flex-shrink: 0; flex-basis: 200px，禁用伸缩才真正“固定” - 必须配
box-sizing: border-box，否则padding和border会让实际宽度超 200px - 右栏
flex: 1后，若内容超长无换行，仍要加word-break: break-word，和 float 场景一样 - 左右栏默认不等高，左栏不会随右栏拉伸——这是正常行为，不是 bug；要等高就得确认父容器没覆盖
align-items: stretch（它是默认值）
