html不负责排版，css才是布局核心；应使用display:flex或grid实现现代布局，避免center、br、float、table等过时方式，注重语义与样式分离。
HTML 本身不负责排版，真正控制页面布局的是 CSS。直接用 <center></center>、<h1></h1> 套缩进、靠 <br> 换行来“排版”，会迅速失控，且无法响应式适配。
用 display 控制元素行为，别依赖 HTML 标签语义做布局
很多人误以为 <div> 是“块级容器”、<code><span></span> 是“行内占位”，就该用来“搭结构”。其实关键不在标签名，而在 CSS 的 display 值：
-
display: block强制独占一行，可设宽高、内外边距 —— 即使是<span></span>也能变“块” -
display: inline忽略宽高，只按内容流排列 ——<div> 设了也无效<li> <code>display: inline-block保留行内位置，又支持宽高和垂直对齐，适合按钮/图标组 -
display: flex或display: grid才是现代布局的起点，不是“高级技巧”，而是默认选择
Flex 布局解决 90% 的单维排列问题
横向导航栏、居中卡片、等高按钮组……这些不用算 margin、不靠 float 清除，用 display: flex 一行声明就能稳住：
.container {
display: flex;
justify-content: center; /* 主轴居中（默认是水平） */
align-items: center; /* 交叉轴居中（默认是垂直） */
gap: 12px; /* 项间间距，比 margin 更干净 */
}注意：justify-content 和 align-items 的方向取决于 flex-direction（默认 row）。如果改成 column，两个属性的作用轴就互换了。
立即学习“前端免费学习笔记（深入）”；
常见翻车点：
- 忘记给父容器设
display: flex，只在子元素上写align-self—— 没用 - 用
margin: auto居中子元素，但父容器没设display: flex—— 只对块级元素的水平居中有效，垂直无效 - 用
float+clear配合 flex —— 冲突，float 在 flex 容器里被忽略
Grid 布局处理二维区域划分，别硬套 float 或 table
当你要把页面切成“头部+侧边栏+主内容+底部”这种明确网格区域，display: grid 比手动计算百分比宽度+浮动靠谱得多：
.page {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-rows: 60px 1fr 40px;
grid-template-columns: 200px 1fr 300px;
}
<p>.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }优势在于：区域命名即所见，顺序与 DOM 结构解耦，响应式时只需改 grid-template-areas 就能重排版。而 float 布局一旦加个 overflow: hidden 或 zoom: 1 就可能崩。
兼容性提醒：display: grid 在 IE 中完全不可用（哪怕 -ms-grid 也不推荐继续维护），如需支持 IE11，优先用 flex + 伪元素清除浮动，或引入 autoprefixer 并明确指定目标浏览器版本。
别用 <table> 做布局，即使它“看起来很整齐”<p><code><table> 的语义是“展示表格数据”，不是“分格子”。用它排版会导致：<ul>
<li>屏幕阅读器误读为数据表，影响无障碍访问</li>
<li>移动端强制横向滚动（因为 table 会撑开容器）</li>
<li>无法用 <code>gap、justify-content 等现代属性控制间距
<table> 后，DOM 层级爆炸，调试困难<p>真要兼容老系统且必须二维对齐？用 <code>display: table-cell 配合 display: table —— 语义仍是“模拟表格行为”，但结构还是 div，可控性强得多。
最常被忽略的一点：布局类 CSS 应该和语义类分离。比如不要写 class="left-sidebar" 然后在 CSS 里定义 .left-sidebar { float: left; width: 200px; }；而应写 class="sidebar layout-sidebar-left"，把布局规则抽到独立 class 里，方便复用和覆盖。
