Floatで親要素を飛び出した子要素を一発で解決してくれるCSS

はるかす
こんにちは、はるかす(@mametyralove)です。

WEBプログラミングを勉強しているとほぼ必ず謎の挙動に出会います。その代表格と言えるのが親要素を飛び出す子要素現象(適当)です。

僕もそれに引っかかってしまったので、調べた内容を備忘録として残しておきます。

参考になれば幸いです。ただ、どんな理由で治るのかは理解していないので、あくまで救急処置程度に考えておいてください。

 

このような現象は基本的にFloatを子要素に使っていることで発生します。

その場合、親要素にoverflow: hiddenを付与することで直すことができます。ちゃんとしたコードは以下の通りです。

たった一行でスッと治ってくれるので気持ちが良いですね。

 

先述の通り、ちゃんと理解したいのであればしっかりと調べてみるべきです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です