clearfixの紹介

clearfixの紹介

floatを使用したとき枠や背景が消えたり，途中で切れたりしたことはありませんか。
floatした要素（ボックス）を含む親要素（ボックス）のborderやbackgroundが途中で切れてしまうことがあります。

floatした要素の高さは親要素の高さに反映されない

flootした要素は親要素の高さに反映されないためclear: both;をあてたりしていました。
一番下に何か要素が入れられる場合はよいのですが，入れられない場合はちょっと困ります。

clearfix

こうしたややこしい問題を解決してくれるのが clearfix という手法です。:afterの疑似要素とcontentプロパティで新たなボックスを入れ，これにclearをあてるものです。

使い方

CSS

.clearfix {
width:100%;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
とcssに記述

HTML

親要素に
class=”clearfix”
と指定します。

これでfloatした要素をclear:both;などを使わずに
float解除できます。
ぜひ参考にしてみてください。