たかおLab

【CSS】floatとclearfixについて

HTML, CSS プログラミング
HTML5とCSS3のロゴ画像

floatとclearfixについて学んだので、そのまとめ。

 

 

 

floatによるレイアウトの崩れ

 

ある要素の中で横並びのレイアウトを実現するためにfloatを使用すると、floatをかけた要素の高さを親要素が認識できなくなってしまい、表示が崩れる場合があります(以下の例を参照)。

 

 

 

floatでレイアウトが崩れてしまうときのサンプル画像

 

赤と黄色のボックスは横並びになっていますが、青い枠線からはみ出しています。

 

.borderが中の.leftと.rightの高さを認識できず、他に要素がないので高さが0になってしまっているためです。

 

それにより、後続の.bottom(緑のボックス)も上にせり上がってしまっています。

 

これを解決するために、clearfixを使用します。

 

 

.clearfixでfloatによる回り込みを解除する

 

clearプロパティを使用して、.borderの子要素にかかっているfloatをclear(回り込みを解除)する必要があります。

 

 

 

floatによるレイアウト崩れをclearプロパティで修正した画像

 

これで、子要素の回り込みを解除したい親要素には「clearfix」というクラスをつけるだけで表示崩れを防げるようになりました。