包含块的确定与作用

包含块是什么

一个元素的尺寸和位置经常受其包含块(containing block)的影响。大多数情况下，包含块就是这个元素最近的祖先块元素的内容区，但也不是总是这样。

当一个客户端代理（比如说浏览器）展示一个文档的时候，对于每一个元素，它都产生了一个盒子。每一个盒子都被划分为四个区域：

内容区
内边距区
边框区
外边距区

许多开发者认为一个元素的包含块就是他的父元素的内容区。但事实并非如此。接下来让我们来看看，确定元素包含块的因素都有哪些。

包含块大致分为以下几种情况

根元素的包含块：

根元素的包含块也成为初始包含块，在HTML中根元素就是html标签，个别浏览器也可能是body。在大多数浏览器中初始包含块的大小就是一个视窗大小的矩形

浮动元素：

包含块为最近的块级祖先元素

对于一个非根元素，如果其position值是relative或者是static

包含块由最近的块级框，表单元格或行内块祖先框的内容边界构成

对于一个非根元素，如果其position为fixed

包含块为视口大小的矩形

对于一个非根元素，如果其position为absolute

包含块是最近开启定位的祖先元素的
a、如果包含块是块级元素 包含块大小是内边距以内区域
b、如果包含块是内敛元素
c、如果没有祖先元素，包含块则为初始包含块

包含块的作用

元素的尺寸及位置，常常会受它的包含块所影响。对于一些属性，例如 width, height, padding, margin，绝对定位元素的偏移值 （比如 position 被设置为 absolute 或 fixed），当我们对其赋予百分比值时，这些值的计算值，就是通过元素的包含块计算得来。

要计算 height top 及 bottom 中的百分值，是通过包含块的 height 的值。如果包含块的 height 值会根据它的内容变化，而且包含块的 position 属性的值被赋予 relative 或 static ，那么，这些值的计算值为 auto。
要计算 width, left, right, padding, margin 这些属性由包含块的 width 属性的值来计算它的百分值。

参考MDN链接