CSS布局应先掌握display、position和文档流：display的block/inline/inline-block决定元素占行与尺寸行为；position的static/relative/absolute/fixed控制是否脱离文档流；float需处理父容器塌陷；Flex/Grid是进阶方案，非起点。
别从 Flex 或 Grid 开始学 CSS 布局——它们是解决方案，不是起点。真正卡住新手的，是没搞清 display、position 和文档流这三样东西怎么配合工作。
理解 display 的三种核心值：block / inline / inline-block
几乎所有布局混乱，都源于对这三个值的行为差异没建立直觉。它们决定元素“占不占整行”“能不能设宽高”“怎么和旁边元素相处”：
-
display: block：独占一行，width/height/padding/margin全部生效（如<div>、<code><p></p>） -
display: inline：不换行，无视width/height，vertical-align有效（如<span></span>、<a></a>） -
display: inline-block：不换行，但width/height生效，可对齐（适合做导航菜单项或图标文字组合） -
position: static（默认）：完全在文档流里，top/left等无效 -
position: relative：仍在文档流中占位，但可用top/left相对自己原始位置偏移 -
position: absolute：完全脱离文档流，定位参考的是最近的position不为static的祖先（不是屏幕左上角！） -
position: fixed：脱离文档流，参考视口定位，滚动不跟随 - 在父容器末尾加一个清除浮动的空元素：
<div style="clear: both"></div>
常见错误：给 <span></span> 设 height 没反应 → 它默认是 inline，得先改成 inline-block 或 block。
掌握 position 的四种取值和文档流关系
position 不是“让元素动起来”的开关，而是“要不要脱离文档流”的开关。脱离了，别的元素就当它不存在：
立即学习“前端免费学习笔记（深入）”；
典型陷阱：position: absolute 子元素找不到定位父容器 → 检查父级是否设置了 position: relative（哪怕只是用来当“定位上下文”，不需要偏移）。
用 float 做简单两栏时，必须处理父容器塌陷
虽然现代布局多用 Flex/Grid，但很多老项目、邮件模板、图文混排仍用 float。新手写完两栏发现父 <div> 高度变成 0，是因为浮动元素已脱离文档流：<pre class="brush:php;toolbar:false;">.container {
border: 1px solid #ccc;
}
.left {
float: left;
width: 200px;
}
.right {
float: right;
width: calc(100% - 200px);
}</pre><p>解决方法只有两个靠谱的：</p>
<ul>
<li>给父容器加 <code>overflow: hidden（最轻量，但可能影响子元素溢出显示）
别用 float 做三栏以上复杂布局——它本就不为此设计，维护成本高，响应式难做。
Flex 布局前，先确认你真的需要它
Flex 不是“更高级的 float”，它是为一维布局（单行或单列）优化的。如果你的需求是：
- 水平居中一个按钮 →
text-align: center+display: inline-block就够了 - 垂直+水平居中一个弹窗 →
position: absolute+transform: translate(-50%, -50%)更直接 - 导航栏等宽分布 →
display: flex+justify-content: space-between才是它该出场的时候
过早套用 display: flex 容易掩盖对基础流式行为的理解缺失。先能手写一个不依赖 Flex 的响应式导航（用 inline-block + @media），再学 Flex 才有判断力。
文档流是隐性的，但它比任何 CSS 属性都重要。所有“为什么这个元素没按我想的排”“为什么 margin 不生效”“为什么父容器没高度”，答案八成藏在 display 和 position 对文档流的改动里。
