文档流是html元素默认布局方式，块级元素垂直排列独占一行，行内元素水平排列；脱离文档流需主动使用float、absolute或fixed等。
文档流是默认行为，定位是主动脱离；不理解这点，所有布局问题都会变成“为什么它没按我想的来”。
文档流里块级和内联元素的行为差异
块级元素（如 div、p、h1）天然独占一行，上下 margin 会真实生效；内联元素（如 span、a、img）则挤在一行里，设置 width、height、margin-top 或 margin-bottom 基本无效。
常见错误现象：
- 给
span加了margin-bottom: 20px，但下一行内容没被推开 - 两个
div紧挨着写，却出现意外的垂直间距——其实是margin-collapse（外边距合并）在起作用
实用建议：
- 想让内联元素响应尺寸或垂直对齐，优先用
display: inline-block或display: inline-flex - 避免依赖块级元素的“自然换行”做复杂布局，容易受字体、行高、盒模型影响
- 重置默认行为时，
* { margin: 0; padding: 0; }要慎用——ul和ol的缩进、h1的留白都是有意为之
relative 和 absolute 定位的参照系到底是谁
position: relative 只改变渲染位置，不改变文档流位置；position: absolute 则完全脱离文档流，且它的定位起点不是父容器左上角，而是“最近的已定位祖先元素”（即 position 值为 relative、absolute、fixed 或 sticky 的父级）。
典型陷阱：
- 父容器没设
position: relative，子元素position: absolute后直接相对于body定位，页面一滚动就“飞走” - 给父元素设了
position: absolute，结果子元素也跟着脱离文档流，整个结构塌陷 -
top: 0; left: 0;在不同祖先定位状态下，实际坐标完全不同
判断方法很简单：打开浏览器开发者工具，选中元素，看“Computed”面板里的 position 和 offsetParent 值。如果 offsetParent 是 body，说明没找到有效的定位上下文。
fixed 定位和 sticky 定位的关键区别
position: fixed 永远相对于视口（viewport），滚动时纹丝不动；position: sticky 表面像 relative，但滚动到临界点后会“粘住”，变成类似 fixed 的行为——但它仍属于文档流，不会影响其他元素排版。
使用场景与限制：
-
fixed适合全局导航栏、返回顶部按钮，但要注意它会脱离文档流，可能遮挡下方内容，需手动预留padding-top -
sticky必须配合top（或bottom）才生效，且仅在其包含块内有效；父容器不能有overflow: hidden或transform，否则失效 - 移动端 Safari 对
sticky支持较晚（iOS 13.4+），老版本需降级为 JS 模拟
一个常被忽略的事实：sticky 元素在“粘住”状态时，z-index 依然生效，但它不会提升父容器的层叠上下文——这点和 fixed 不同。
脱离文档流的三种方式如何互相干扰
float、position: absolute、position: fixed 都会让元素脱离文档流，但它们的副作用完全不同：
-
float会触发BFC（块级格式化上下文），能清除浮动、防止外边距合并，但现代布局中基本被flex和grid替代 -
absolute和fixed不触发 BFC，也不影响兄弟元素的外边距行为，但会让父容器高度坍塌（除非父容器有明确 height 或其他 BFC 触发条件） - 三者不能共存：
float和position（除static）同时存在时，float会被忽略
最易被忽视的一点：脱离文档流的元素，其 margin 不再参与文档流内的外边距合并逻辑，但 transform 平移后的元素仍保留在文档流中——这是实现无坍塌位移的更安全选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
