【Containing Block】
确定一个元素的包含块的过程完全依赖于这个元素的 position
属性:
1、如果 position 属性为 static
或 relative
,包含块就是由它的最近的祖先块元素
2、如果 position 属性为 absolute
,包含块就是由它的最近的 position 的值不是 static
(也就是值为fixed
, absolute
, relative
或 sticky
)的祖先元素的内边距区的边缘组成。
3、如果 position 属性是 fixed
,包含块就是由 viewport
更多详情见参考[1].
【float & absolute】
1、The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).
使用了 float 属性的元素,其依然属于文档流,但不再是默认文档流,而是float文档流。
所以可以说元素有两用文档流的排版方式:
1)默认。
2)float。
参考:
1、https://developer.mozilla.org/zh-CN/docs/Web/CSS/All_About_The_Containing_Block