この記事は人間が書きました

はじめに

こんにちは、赤神です！
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。

「1000本ノックとは」
https://qiita.com/sora_akagami/items/c8da4296dea3823376ca

Margin の相殺とは？

通常、隣り合う要素の margin は足し算されません。上下に隣接するブロック要素の縦方向の margin （margin-top と margin-bottom）が接する場合、大きい方の margin の値が採用され、小さい方は無視されます。これを「相殺」と呼びます。

例えば、上の要素に margin-bottom: 30px 、下の要素に margin-top: 50px を指定した場合、間のスペースは80pxではなく、大きい方の50pxになります。

Margin の相殺が起こる主なパターン

①隣接する兄弟要素の間
②親子要素の間（親要素に border や padding がない場合、親の margin-top と子の margin-top が相殺する）

ブロックフォーマットコンテキスト（BFC）

BFCが作られた要素（コンテナ）は、以下のような特別なルールを持つようになります。

①マージンの相殺を防ぐ

コンテナの内側にある子要素の margin が、外側にある要素の margin と相殺しなくなります。

②回り込み（float）を解除する

コンテナの内側にある float 指定された要素の高さを、コンテナが正しく認識できるようになります（clearfixと同じ効果）。

BFCを生成する主なCSSプロパティ

意図的にBFCを作り出すには、親要素に以下のいずれかのスタイルを指定します。

overflow: hidden; （autoやscrollでも可）
display: flow-root; （BFCを作るためだけに用意された最新の値）
display: inline-block;
position: absolute;
position: fixed;

BFCを意図的に生成することで、マージンの相殺や float の回り込みといった、予期せぬレイアウトの崩れをコントロールすることができます。

作成したコード

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>フロントエンド1000本ノック 0024</title>
</head>
<body>
    <main>
      <h1>marginの相殺とBFC</h1>

      <section>
        <h2>問題の再現</h2>
        <div style="width: 150px; height: 100px; background-color: lightblue; margin-top: 50px;">
          <div style="width: 100px; height: 50px; background-color: lightcoral; margin-top: 30px;"></div>
        </div>
      </section>
      

      <section>
        <h2>問題の解決</h2>
        <div style="overflow: hidden; width: 150px; height: 100px; background-color: lightblue; margin-top: 50px;">
          <div style="width: 100px; height: 50px; background-color: lightcoral; margin-top: 30px;"></div>
        </div>
      </section>
    </main>
    <footer>
      <p>Copyright 2025</p>
      <p>フロントエンド1000本ノック</p>
    </footer>

</body>
</html>