浮动导致文字跳行是因为浮动元素脱离文档流，行内内容绕排而块级元素无视；修复方法包括触发BFC（如overflow:hidden）、清除浮动（clear:both）或改用Flex/Grid布局。
浮动元素导致后面文字跳到下一行，怎么修
直接原因是浮动元素脱离文档流，后续块级元素会“无视”它，但行内内容（比如段落里的文字）会绕着浮动元素排版——如果容器不够宽，文字就被挤到下一行。这不是 bug，是 CSS 浮动的原始设计行为。
- 检查浮动元素是否真的需要
float：现代布局中，flex或grid更可控，float仅建议用于图文环绕等少数场景 - 给后续文字容器加
overflow: hidden或overflow: auto，能触发 BFC，让容器“包裹住”浮动影响，避免文字跳行 - 若必须保留浮动，且后续是
<p></p>这类块级元素，给它加clear: both可强制换行，但这是“断开”而非“绕排”，要按需选择
计算浮动元素宽度时漏掉 padding/border/margin 怎么办
浮动元素的总占用宽度 = width + padding + border + margin，但很多人只盯着 width 设值，结果在窄容器里溢出、触发换行或滚动条。
- 用
box-sizing: border-box统一计算基准，这样设的width就包含padding和border -
margin永远不参与box-sizing计算，左右margin必须手动计入容器剩余空间 - 浏览器开发者工具里看“Computed”面板的
width值，比看 Styles 面板更准——它显示最终渲染宽度
IE 中浮动元素后文字错位，兼容性怎么兜底
IE6–8 对 float 和 hasLayout 的处理很敏感，常见表现是文字突然缩进、换行异常、或者浮动元素本身塌陷。
- 给浮动元素加
zoom: 1（IE专有），触发 hasLayout，修复塌陷和尺寸计算错误 - 避免在浮动元素上同时用
display: inline和float，IE6 会忽略float - 如果父容器没设高度，记得用
::after伪元素清除浮动（content: ""+clear: both），否则 IE 下父容器可能高度为 0
用 float 做两栏布局时，右边文字总被截断
典型场景：左栏 float: left; width: 200px，右栏是普通 <p></p>，但文字只显示一两行就没了——其实是右栏没“避开”左栏，而是从左栏底部开始流，视觉上像被截断。
立即学习“前端免费学习笔记（深入）”；
- 右栏不要也浮动，而是保持文档流，靠
margin-left留出左栏宽度（比如margin-left: 220px，含左栏margin） - 如果右栏也要自适应宽度，用
overflow: hidden（触发 BFC）+margin-left是最稳的组合 - 别依赖
width: auto在浮动旁自动收缩：它只会填满剩余空间，但不会主动避让浮动区域，除非触发 BFC
浮动的“绕排”逻辑只对行内内容生效，块级盒子默认不绕。真正容易被忽略的是：你看到的文字跳行，往往不是宽度算错了，而是没意识到那个容器根本没进入绕排上下文。
