contain

/* キーワード値 */
contain: none;
contain: strict;
contain: content;
contain: size;
contain: layout;
contain: style;
contain: paint;

/* 複数のキーワード */
contain: size paint;
contain: size layout paint;

/* グローバル値 */
contain: inherit;
contain: initial;
contain: revert;
contain: unset;

contain プロパティは、以下のうちの一つで指定します。

• none, strict, content の何れかのキーワードを単独で使用。
• size, layout, style, and paint の各キーワードを 1 つ以上、任意の順序で使用。

none

その要素が通常通り描画され、封じ込めを適用しないことを示します。

strict

style を除くすべての封じ込め規則がその要素に適用されることを示します。これは contain: size layout paint と同等です。

content

size および style 以外の封じ込め規則がその要素に適用されることを示します。これは contain: layout paint と同等です。

size

子孫の寸法を確認する必要なく、その要素の寸法を変更できることを示します。

layout

要素の外側が内部のレイアウトなどに影響しないことを示します。

style

ある要素とその子孫以外に影響を及ぼす可能性のあるプロパティの場合、その要素が含まれている要素をエスケープしないことを示します。

paint

その要素の子孫を、境界の外に表示しないことを示します。包含ボックスが画面外の場合、ブラウザーは中の要素を描画する必要はありません。 — そのボックスに完全に含まれていれば、やはり画面外にあるからです。そして、子孫が包含要素の領域を溢れている場合、子孫は包含要素の境界ボックスで切り取られます。

contain = 
  none                                  |
  strict                                |
  content                               |
  [ size || layout || style || paint ]  

以下のマークアップは多数のコンテンツを持つ記事からなるものです。

<h1>My blog</h1>
<article>
  <h2>Heading of a nice article</h2>
  <p>Content here.</p>
</article>
<article>
  <h2>Another heading of another article</h2>
  <img src="graphic.jpg" alt="photo">
  <p>More content here.</p>
</article>

それぞれの <article> および <img> には境界があり、画像は浮動状態です。

img {
  float: left;
  border: 3px solid black;
}

article {
  border: 1px solid black;
}

問題はすぐにわかるでしょう。 — 記事の最下部を超えている浮動要素を解消する対策をしていません。

1 つ目の記事の下部に別の画像を挿入すると、 DOM ツリーの大部分が再レイアウトされたり、再描画されたりする可能性があり、 2 つ目の記事のレイアウトにも支障をきたしてしまいます。

<h1>My blog</h1>
<article>
  <h2>Heading of a nice article</h2>
  <p>Content here.</p>
  <img src="i-just-showed-up.jpg" alt="social">
</article>
<article>
  <h2>Another heading of another article</h2>
  <img src="graphic.jpg" alt="photo">
  <p>More content here.</p>
</article>

img {
  float: left;
  border: 3px solid black;
}

article {
  border: 1px solid black;
}

ご覧の通り、浮動要素の動作方法が原因で、最初の画像が 2 つ目の記事の領域内に掛かってしまっています。

それぞれの article の contain プロパティを content の値を設定すれば、新しい要素が挿入されたときに、ブラウザーはそれが含まれる要素のサブツリーの再計算をするだけで、その外側には何もする必要がないことを理解します。

<h1>My blog</h1>
<article>
  <h2>Heading of a nice article</h2>
  <p>Content here.</p>
  <img src="i-just-showed-up.jpg" alt="social">
</article>
<article>
  <h2>Another heading of another article</h2>
  <img src="graphic.jpg" alt="photo">
  <p>More content here.</p>
</article>

img {
  float: left;
  border: 3px solid black;
}

article {
  border: 1px solid black;
  contain: content;
}

これは最初の画像についても、 2 つ目の記事の下に浮遊せずに、包含する要素の範囲内に留まることも意味します。

• CSS 封じ込め
• CSS の content-visibility プロパティ
• CSS の position プロパティ