网页排版混乱主因是盒模型与布局流失控，应优先改box-sizing、用flex替代float、避免text-align误用于块级元素居中，而非反复调试margin/padding。
HTM网页排版混乱，不是代码写错了，而是样式没管住盒模型或布局流——直接改box-sizing、加display: flex、删掉float，比反复调margin和padding快得多。
为什么改了text-align文字还是不居中？
因为text-align只对块级容器内的**行内内容**（文字、img、span）起作用。如果想让一个div本身居中，它得是块级元素且有宽度，再配margin: 0 auto；如果它没设width，auto就无效。
- 常见错误：给父
div加text-align: center，却指望子div跟着居中——子div默认是块级，不受影响 - 正确做法：子
div加margin-left: auto; margin-right: auto;，同时必须带width（比如width: 600px或width: 80%） - 更稳方案：父容器用
display: flex; justify-content: center;，子元素自动水平居中，不用算宽也不用管margin
float导致的错位怎么一招清掉？
浮动会让父容器“塌陷”，子元素飘出边界，尤其多列并排时最后一个掉下来——这不是bug，是float的设计行为。现代浏览器早该换掉它。
- 立刻见效：把父容器加上
overflow: hidden或display: flow-root，能强制包裹浮动子项（但只是补救，不是根治） - 推荐替换：把
float: left全删掉，父容器改用display: flex，子项默认横向排列；需要换行就加flex-wrap: wrap - 兼容提醒：
display: flow-root在IE中不支持，但IE已淘汰；若真要保IE11，用display: flex加Autoprefixer自动补-ms-前缀即可
列表符号悬出、缩进不齐怎么批量修正？
默认list-style-position: outside，符号画在内容框外，哪怕清了padding和margin，符号仍可能“贴着左边框悬空”。这不是对不齐，是渲染位置没统一。
- 根本解法：定义语义类，比如
class="list-reset"，里面写list-style-position: inside; padding-left: 0; margin-left: 0; - 横排列表：用
class="list-inline"，配合display: inline-block; vertical-align: top;，避免float带来的清理麻烦 - 注意陷阱：别用
* { list-style: none; }全局重置——导航菜单、侧边栏、页脚链接都依赖符号，一锅端会破坏可访问性
真正卡住人的从来不是“怎么对齐”，而是不知道哪个属性在暗中干扰布局流。比如box-sizing默认是content-box，你设了width: 200px又加padding: 10px，实际占宽就是220px——这种隐性溢出，比写错标签更难一眼发现。
