标准文档流是浏览器默认渲染规则：块级元素自上而下堆叠，行内元素从左到右排列；添加float、absolute或flex会使其脱离该流，引发父容器塌陷、文字绕排错乱等问题。
什么是标准文档流，为什么元素不按预期排列
标准文档流是浏览器渲染页面的默认规则：块级元素自上而下堆叠，行内元素从左到右排列，彼此不重叠。一旦你加了 float、position: absolute 或 display: flex，元素就脱离了这个流——这时候“父容器高度塌陷”“文字绕排错乱”“兄弟元素突然上移”就全来了。
常见错误现象：div 里塞了几个 float: left 的子元素，但父 div 高度变成 0；或者用 inline-block 排列按钮，中间莫名多出 4px 间隙。
- 间隙来源其实是 HTML 中的换行符和空格，被当成文本节点参与行内布局，不是 CSS bug
-
float元素会完全脱离文档流，父容器无法感知其尺寸，必须手动清除浮动（比如用overflow: hidden或伪元素::after） - 现代布局优先用
display: flex或display: grid，它们仍在文档流中可控，且不触发那些老式副作用
盒子模型的 width/height 算的是哪部分
默认是 box-sizing: content-box：你写 width: 200px，实际占位 = 内容宽 + padding + border。很多人调样式时发现“明明设了 200px，结果撑到 224px”，就是忘了这层叠加。
使用场景：表单控件、卡片组件、需要像素级对齐的 UI 区域。
立即学习“前端免费学习笔记（深入）”；
-
padding和border超出你写的width，可能触发横向滚动或破坏栅格对齐 - 全局重置推荐加一句
* { box-sizing: border-box; }，之后所有width都指“最外边框总宽”，更符合直觉 - 注意
box-sizing不继承，但可以用inherit显式传递，某些第三方组件内部会覆盖它
margin 合并是怎么回事，为什么两个 div 距离不是 40px
相邻块级元素的垂直 margin 会合并：两个 margin-top: 20px 的 div，实际间距只有 20px，不是 40px。这是规范行为，不是 bug，但新手常以为是 CSS 失效。
典型触发条件：兄弟元素之间、父元素与第一个/最后一个子元素之间（尤其当父元素没 border 或 padding 时）。
- 合并只发生在垂直方向（
margin-top/margin-bottom），水平方向从不合并 - 解决方法不一定是“把 margin 改小”，而是打断合并条件：比如给父容器加
padding: 1px，或用overflow: hidden创建 BFC - Flex/Grid 容器里的子项不发生 margin 合并，这也是它们更可预测的原因之一
display: inline 和 inline-block 的关键区别在哪
inline 元素不能设 width/height，上下 margin 无效，vertical-align 是唯一控制对齐的方式；inline-block 则保留了块级盒模型特性，又保持行内排列能力——但它会忠实渲染 HTML 换行符带来的空格。
性能影响极小，但兼容性要注意：inline-block 在 IE6/7 需要 zoom: 1 和 *display: inline 触发 hasLayout。
- 想让多个按钮并排且等高，用
inline-block比浮动更轻量，但记得删 HTML 换行或设父容器font-size: 0再重置子元素字体 -
vertical-align: middle对inline-block生效，但基准线是文本基线，不是盒中心，容易偏高——改用vertical-align: top或直接切到 Flex 更稳 - 别在
inline元素上强行设margin-bottom期望压低下方内容，它根本不起作用
文档流不是“背景知识”，它是所有布局问题的起点。一旦你开始调 position 或 float，就得同步考虑它对流的影响——这点很容易被跳过，但几乎所有“样式失灵”都卡在这里。
