回り込みハックとBFC

<!DOCTYPE html>
<html lang="ja-JP">
  <head>
    <meta charset="UTF-8" />
    <title>ライブコードサンプル</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Roboto&family=Noto+Sans+JP&family=Noto+Color+Emoji&display=swap"
    />
    <link rel="stylesheet" href="lib/style.css" />
  </head>
  <body>
    <div id="app">
      <nav><p>ナビゲーションエリア</p></nav>
      <main>
        <article>
          <header>
            <h1>ド</h1>
            <p>（ドイツ）</p>
          </header>
          <p>ドはドイツのド</p>
        </article>
        <article>
          <header>
            <h1>レ</h1>
            <p>（レバノン）</p>
          </header>
          <p>レはレバノンのレ</p>
        </article>
        <article>
          <header>
            <h1>ミ</h1>
            <p>（ミャンマー）</p>
          </header>
          <p>ミはミャンマーのミ</p>
        </article>
        <article>
          <header>
            <h1>ファ</h1>
            <p>（フランス）</p>
          </header>
          <p>ファはフランスのファ</p>
        </article>
        <article>
          <header>
            <h1>ソ</h1>
            <p>（ソロモン諸島）</p>
          </header>
          <p>ソはソロモン諸島のソ</p>
        </article>
        <article>
          <header>
            <h1>ラ</h1>
            <p>（ラトビア）</p>
          </header>
          <p>ラはラトビアのラ</p>
        </article>
        <article>
          <header>
            <h1>シ</h1>
            <p>（シンガポール）</p>
          </header>
          <p>シはシンガポールのシ</p>
        </article>
        <div class="last">
          <p>さあ行きましょう！</p>
        </div>
      </main>
      <footer><p>フッターエリア</p></footer>
    </div>
  </body>
</html>

/** ボックスサイズを `border-box` にそろえる */
html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
  font-style: normal;
}

/** サイトの土台を定義 */
html,
body {
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  font-size: 16px;
  font-weight: normal;
  margin: 0;
  padding: 0;
}

nav {
  width: 100%;
  background: #bbb;
  margin-bottom: 1rem;
  padding: 1rem 0;

  p {
    margin: 0;
    text-align: center;
  }
}
div#app {
  background-image: url("https://picsum.photos/400/200");
  background-color: #888;
}
main {
  background-color: #888;
  background-repeat: repeat;

  // この要素は左寄せのレイアウトにして…
  article {
    float: left;
    margin: 0 0.5rem 1rem;
    padding: 0.5rem;
    border-radius: 0.3rem;
    background: #fff8;
    backdrop-filter: blur(4px);

    header {
      background-color: #888;
      // ここに {overflow: visible以外を設定すれば、BFCになる;}
      overflow: auto;

      h1 {
        float: left;
        font-size: 2rem;
        margin: 0.2rem;
        padding: 0.1rem;
        line-height: 1;
        background-color: #fff;
      }
      p { 
        font-size: 0.8rem;
      }
    }

    p {
      margin: 0;
    }
  }
  // この要素は右寄せのレイアウトにして…
  div.last {
    float: right;
    margin: 0 0.5rem 1rem;
    padding: 0.5rem;
    background: #ea0;

    &:hover {
      background: #ff0;
    }

    p {
      margin: 0;
    }
  }
}
footer {
  // ここで寄せを解除！
  clear: both;
  width: 100%;
  background: #bbb;
  padding: 1rem 0;

  p {
    margin: 0;
    text-align: center;
  }
}

{
  "name": "plunker-project",
  "dependencies": {
    "sass": "^1.52.3"
  }
}