包含ブロックとは
CSSにおける包含ブロックとは、要素の位置や大きさを計算する際に基準となるブロックのことです。
widthやheightが%によって指定されているときには、包含ブロックの大きさをもとに計算されます。
例えば、width:50%と指定されていて、その要素の包含ブロックの横幅が400pxと指定されているときには、その要素の横幅は200pxと計算されるといった具合です。
包含ブロックは、要素の直近のブロックレベルの祖先要素が該当することが多いですが、例外もあります。
包含ブロックの決まり方
包含ブロックは、基本的にはposition（デフォルト値はstatic）の値によって決まります。
static,relative,sticky
static,relative,stickyはどれも通常のフロー（Normal Flow）で配置されるposition値です。
positionがstatic,relative,stickyのいずれかのときには、ブロックコンテナかブロック整形コンテキスト(BFC)を形成する直近の祖先要素のパディングボックスの辺が包含ブロックとなります。
ブロックコンテナには、divなどのブロック要素やインラインブロック要素、テーブルのセルth、tdやflex アイテム、grid アイテムが該当します。
ブロック整形コンテキスト(BFC)とは、レイアウトを管理する独立した空間のことです。
異なるBFC 同士ではマージンの相殺が起こらなかったり、float 要素とは重ならないなど、独立性をもっています。
BFC を生成する代表例には、以下のようなものがあります。
-
<html>（root要素） -
float要素 -
position: fixed、position: stickyが指定されている要素 -
display: inline-blockの要素 - overflow が visible 以外の値であるブロック要素
- テーブルのセル
- flex アイテム
- grid アイテム
上のような条件を満たす直近の祖先要素の（パディングボックスの）辺の長さや位置が%やtopの基準になるわけですね。
fixed
positon:fixedの場合、基本的にはビューポート（画面の表示領域）が包含ブロックとなります1。
absolute
positon:absoluteの場合、position:static以外の直近の祖先要素のパディングボックスが包含ブロックとなります1。
%がうまくきかないとき
widthやheightで%値を指定しているのに大きさがかわらなかったり、想定とは異なる大きさになっているときには、その要素の包含ブロックがどの要素で、包含ブロックに幅が設定されているかを確認してみると原因が見つかるかもしれません。
以下の構造を考えてみます。
<div class="block_div">
<span class="inline_span">
inline span
<div class="div1">div1</div>
</span>
<div class="div2">div2</div>
</div>
.div1 {
height: 40%;
background-color: orange;
}
.div2 {
height: 40%;
background-color: red;
}
.block_div{
height: 160px;
background-color: yellow;
}
.inline_span{
height: 40px;
background-color: green;
}
このHTML では、div1の親要素がspan要素となっています。
しかし、div1の高さはspanの高さの40%にあたる16pxではなく、div2と同じ64pxとなります。
これは、div1の包含ブロックがspanではなく、<div class="block_div">となるためで、%の基準がspanの高さ40pxではなく、<div class="block_div">の高さ160pxになるためです。
計算の基準となっている包含ブロックを見つけ、%指定を使いこなしていきたいですね。