floatとclearfixについて学んだので、そのまとめ。
目次
floatによるレイアウトの崩れ
ある要素の中で横並びのレイアウトを実現するためにfloatを使用すると、floatをかけた要素の高さを親要素が認識できなくなってしまい、表示が崩れる場合があります（以下の例を参照）。
<body>
<div class="border">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</body>
.border {
border: 2px solid blue;
margin-bottom: 20px;
opacity: 0.8;
}
.left {
float: left;
width: 100px;
height: 100px;
background-color: yellow;
}
.right {
float: right;
width: 200px;
height: 200px;
background-color: red;
}
.bottom {
width: 350px;
height: 35px;
background-color: green
}
赤と黄色のボックスは横並びになっていますが、青い枠線からはみ出しています。
.borderが中の.leftと.rightの高さを認識できず、他に要素がないので高さが0になってしまっているためです。
それにより、後続の.bottom（緑のボックス）も上にせり上がってしまっています。
これを解決するために、clearfixを使用します。
.clearfixでfloatによる回り込みを解除する
clearプロパティを使用して、.borderの子要素にかかっているfloatをclear（回り込みを解除）する必要があります。
<body>
<div class="border clearfix"><!-- ←クラスを追加 -->
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</body>
.clearfix::after {
content: '';
clear: both;
display: block;
}
これで、子要素の回り込みを解除したい親要素には「clearfix」というクラスをつけるだけで表示崩れを防げるようになりました。
コメント