文档流、display 与定位
串起文档流、display、position、float 和 BFC，帮助理解元素为什么会出现在页面中的某个位置。
#type / synthesis
#status / growing
#resource / css
#tech / dev / frontend
[!info] related notes
文档流、display 与定位
很多人学不会 CSS，不是因为属性太多，而是没有搞清楚元素为什么会出现在那里。这个主题要回答的就是这个问题。
一句话主线
先理解默认文档流，再理解 display 如何改变元素的参与方式，再理解 position、float、BFC 如何局部打破或隔离默认规则。
文档流是什么
文档流是浏览器默认的排版规则：
- 块级元素通常从上到下排
- 行内元素通常从左到右排，放不下就换行
如果你什么都不写，页面就是按文档流排的。
display 决定元素以什么方式参与布局
最常见的几种：
block：独占一行，宽度通常撑满父容器inline：不独占一行，宽高更多由内容决定inline-block：不独占一行，但可以设置宽高none：不显示，也不占空间
因此 display 回答的是：
这个元素在布局里扮演什么角色？
position 决定元素是否偏离默认流
static
默认值，完全按照文档流排。
relative
相对自己原来的位置偏移，但原本占的空间还在。
absolute
脱离普通文档流，相对于最近的已定位祖先定位。
fixed
相对于视口定位，滚动页面时位置不随内容移动。
sticky
在阈值前像普通流中的元素，滚动到某个位置后像固定定位一样吸附。
为什么 absolute 容易让人混乱
因为它同时改变了两件事：
- 脱离文档流，不再占据原来的布局位置
- 改为相对于最近的已定位祖先计算偏移
所以排查绝对定位问题时，要先问：
- 它相对谁定位？
- 它脱离文档流后，对兄弟元素造成了什么影响？
float 是旧时代的重要布局机制
float 的原始目的不是做整页布局，而是让文本环绕图片。
它的特点是：
- 元素会向左或向右浮动
- 会部分脱离普通文档流
- 后面的文本可能环绕它
现代页面主布局通常优先用 Flex 和 Grid，但理解 float 仍然重要，因为它能帮助你理解：
- 为什么父元素会高度塌陷
- 为什么文字会绕着某个元素排
- 为什么 BFC 能解决某些老问题
BFC 为什么总和布局问题一起出现
BFC 可以粗略理解为一个相对独立的块级布局区域。
它常用来解决三类问题：
- 包裹内部浮动
- 阻止外边距塌陷
- 做局部布局隔离
所以很多看起来杂乱的技巧，本质上是在“新建一块独立布局区域”。
这一组概念之间的关系
最推荐的理解顺序是：
- 默认先按文档流排
display先决定元素以什么形式参与文档流position再决定元素是否偏离默认流、相对谁定位float是旧布局体系里的一种特殊偏移方式- BFC 用来隔离布局影响和解决典型副作用
为什么现代布局还要学这一套
因为即使你已经会 Flex 和 Grid，页面里仍然会遇到：
- 弹窗和角标为什么要绝对定位
- 吸顶栏为什么要用
sticky - 为什么某个元素高度塌陷
- 为什么
overflow: hidden会“顺手解决”布局问题
这些都离不开文档流、定位和 BFC。
最短记忆方式
display：决定“怎么参与排版”position：决定“是否偏离默认流、相对谁定位”float：旧式偏移与环绕机制- BFC：局部布局隔离机制