ブロックレベル要素内でコンテンツを完結させる

配置の影響範囲をコントロールする

要素を横並びにするときにfloatプロパティは活躍しますが、適用範囲を意識しないと続く他の要素にも影響が及んでしまうことがあります。
今回はoverflowプロパティを使って親要素の中でコンテンツを完結させ、親要素の外側にfloatプロパティの影響が出ないように設定を行います。

この例ではテキストと画像をfloatプロパティを使って横並びにしています。

CSS コード例

section {
  overflow: hidden;
  margin: 0 auto 40px;
  width: 900px;
}

section .text_content {
  float:left;
  width: 48%;
}

p {
  font-size: 86%;
  line-height: 1.6em;
}

section figure {
  float: right;
  width: 48%;
}

section figure img {
  width: 100%;
  max-width: 100%;
}

.banner_area {
  text-align: center;
}

HTML コード例

<section>
  <div class="text_content">
    <p>要素内で使うfloat要素の効果を外側に影響しないようにするにはoverflowプロパティで「hidden」を指定します。<br>このプロパティを設定すると、指定した要素が親要素となり、子孫要素は親要素の範囲外には表示されなくなります。<br>もし親要素に縦横のサイズが指定されていた場合は、表示オーバーした分は非表示になります。</p>
  </div>
  <figure><img src="./images/pic_sample.jpg" alt="メインビジュアル"></figure>
</section>
<section class="banner_area"><a href="#"><img src="./images/banner.png" alt="基礎から応用まで！ HTML&CSS"></a></section>

赤い箇所のsection要素が親要素となり、今回はその要素にoverflowプロパティで「hidden」を指定しています。

overflowプロパティがない場合

親要素にoverflowプロパティが指定されていない場合は、次の表示となります。

下部のピンク色のバナーが上にずれて表示されました。

この現象は、バナーの上にあるテキストと画像にfloatプロパティが適用されており、この2つを囲ってるsection要素が内側のコンテンツのサイズを取得できないために起こります。

言葉だと感覚的に分かりづらいため、section要素に背景色を敷いて確認してみます。
まずはoveflowプロパティがない場合です。
（HTML部分は上記コードと同じなので省略します。）

CSS コード例

section {
  margin: 0 auto 40px;
  width: 900px;
  background: #ccc;
}

section .text_content {
  float:left;
  width: 48%;
}

p {
  font-size: 86%;
  line-height: 1.6em;
}

section figure {
  float: right;
  width: 48%;
}

section figure img {
  width: 100%;
  max-width: 100%;
}

.banner_area {
  text-align: center;
}

ちょっと範囲がよく分からない（意図しない）形になっていることが分かります。
続いて、oveflowプロパティを指定した場合の表示を確認してみます。

CSS コード例

section {
  overflow: hidden;
  margin: 0 auto 40px;
  width: 900px;
  background: #ccc;
}

section .text_content {
  float:left;
  width: 48%;
}

p {
  font-size: 86%;
  line-height: 1.6em;
}

section figure {
  float: right;
  width: 48%;
}

section figure img {
  width: 100%;
  max-width: 100%;
}

.banner_area {
  text-align: center;
}

上下それぞれのsection要素ではっきりと背景色が表示されました。
今回は上のsection要素がoverflowプロパティによって内側の要素(テキストと画像）のサイズを取得できたため、意図した通りの表示になっています。
また、floatプロパティが下部のコンテンツ（ピンク色のバナーエリア）に影響していないことも分かります。

overflowプロパティを区切る親要素で活用すると、clearfixのようなテクニックを使わずに表示をコントロールできるようになります。