内容本身是匿名行内盒子,外面包裹匿名块盒字
本身是块级盒子,内容是匿名行内盒子
本身是块级盒子,内容是匿名行内盒子
内容本身是匿名行内盒子,外面包裹匿名块盒字内容本身是行内盒子,外面包裹着匿名块盒字
本身是块级盒子,内容是匿名行内盒子
内容本身是行内盒子,外面包裹着匿名块盒字 下一个行内盒子 ``` # 普通流、浮动、绝对定位 ## 普通流 > 在普通流中,盒子会依次放置。在块格式化上下文中,盒子在垂直方向依次排列;而在行内格式化上下文中,盒子则水平排列。当 CSS 的 [`position`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/position) 属性为 `static` 或 `relative`,并且 [`float`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/float) 为 `none` 时,其布局方式为普通流。 ## 浮动 > 在浮动定位中,浮动盒子会浮动到当前行的开始或尾部位置。这会导致普通流中的文本及其他内容会 “流” 到浮动盒子的边缘处,除非元素通过 [`clear`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear) 清除了前面的浮动。 ## 绝对定位 > 在绝对定位中,盒子会完全从当前流中移除,并不再影响当前流中的其他盒子,其位置会使用 [`top`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/top)、[`bottom`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/bottom)、[`left`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/left) 和 [`right`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/right) 相对其[包含块](https://developer.mozilla.org/zh-CN/docs/Web/CSS/All_About_The_Containing_Block)进行计算。 # 参考 - [Visual formatting model - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model) - [视觉格式化模型 - Web 开发者指南 | MDN](https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Visual_formatting_model)