排版错乱主因是浏览器默认行为与预期不符，需先定位结构、盒模型或布局上下文问题；检查display类型、父容器布局模式、box-sizing设置、margin折叠、table样式及多规则隐性依赖。
排版错乱不是代码写错了，而是浏览器对默认行为的理解和你预期不一致。直接改样式往往治标不治本，得先确认问题出在结构、盒模型，还是布局上下文。
检查元素 display 类型和父容器布局模式
很多“调不动”的宽高、居中、换行问题，根源是没看清元素当前的 display 值和它所处的容器类型。
- 右键「检查元素」→ 看 Styles 面板里
display是什么：如果是inline（比如span、a），width/height无效，得加display: inline-block或换标签 - 如果父容器是
display: flex，子元素设float就完全失效，还会干扰align-items行为 - 如果父容器是
display: grid，子元素的margin: auto可能意外居中，但text-align对子项无效 - 用 Computed 面板看最终生效的
display，注意继承或框架注入的样式可能覆盖了你的设置
用 box-sizing: border-box 统一尺寸计算逻辑
不加这句，width: 300px + padding: 10px + border: 2px 实际占宽 324px，盒子撑破、换行错位全由此起。
- 全局加一句：
* { box-sizing: border-box; }，比每个元素单独写更省事 - 特别注意表单控件（
input、textarea）和图片——它们默认是content-box，容易在 flex/grid 中尺寸失控 - 如果用了 Normalize.css，它已包含该重置；若用的是自定义 reset，务必补上这一条
快速验证是否是 margin 折叠或高度塌陷
两个块级元素紧挨着，明明写了 margin-bottom: 20px 和 margin-top: 15px，结果间距只有 20px？或者父容器“看不见”子元素，后面内容直接叠上来？大概率是这两个经典陷阱。
立即学习“前端免费学习笔记（深入）”；
- 选中两个相邻元素 → Computed 面板看
margin-top和margin-bottom的实际值，若其中一个是0，说明发生了垂直 margin 折叠 - 给父容器临时加
overflow: hidden或display: flow-root，看高度是否恢复——恢复了就是浮动未清除或 flex 子项脱离文档流 - 避免用
clear: both插空 div，现代方案优先用display: flow-root（兼容性到 Chrome 64+/Firefox 59+）
表格错位优先锁定 border-collapse 和 table-layout
表格看起来“歪了”“列不对齐”“边框双线”，90% 不是 HTML 写错了，而是 CSS 没压住浏览器默认渲染逻辑。
- 第一件事：给
table加border-collapse: collapse，否则单元格边框分离，视觉上就错位 - 第二件事：加
table-layout: fixed，不然列宽随内容伸缩，一行数据长，整列就变宽，破坏对齐 -
th和td的padding必须显式设为相同值，否则文字上下左右不对齐 - 嵌套在表格里的图片或 div，记得加
max-width: 100%，否则溢出单元格直接拉宽整列
真正难调的不是某一行 CSS，而是多个规则叠加后产生的隐性依赖——比如一个 flex 容器里混了 position: absolute 子项，又同时设置了 margin 和 justify-content，这时候删哪条都可能让整个布局“跳变”。动手前，先在开发者工具里把可疑样式逐条禁用，观察变化，比猜更快。
