HTML/CSS

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解除できます。
ぜひ参考にしてみてください。