いつも忘れて思い出すのに時間がかかるCSSテクニック集

HOME > overflowプロパティを使って、親要素の高さが潰れるのを防ぐの巻

overflowプロパティを使って、親要素の高さが潰れるのを防ぐの巻

よくあるこれ↓。floatをしたために、親ボックスが潰れてしまう現象。

飛んでいけぇー、私の想いをのせて!

親ボックスのcssに、「overflow: auto;」を指定してあげると解決!
「overflow: hidden;」でもOK。

HTML

<div class="example01-box-after">
<p class="float-left"><img src="img/css_img01.png" width="150" height="150" /></p>
<p class="float-right">飛んでいけぇー、私の想いをのせて!</p>
</div>

CSS

.example01-box-after {
  width: 400px;
  background-color: #D9ECF0;
  padding: 10px;
  border: 1px solid #A4D1DB;
  overflow: auto;
}

飛んでいけぇー、私の想いをのせて!

ちなみに、「overflow: auto;」と「overflow: hidden;」の違いは、
heightを指定したときに変化の違いが現れる。

overflow: auto; ボックスからはみ出る部分はスクロールバーで表示。

飛んでいけぇー、私の想いをのせて!

overflow: hidden; ボックスからはみ出る部分はカット。

飛んでいけぇー、私の想いをのせて!

↑ページトップへ

HOMEへ