clearfixの紹介
clearfixの紹介
floatを使用したとき枠や背景が消えたり,途中で切れたりしたことはありませんか。
floatした要素(ボックス)を含む親要素(ボックス)のborderやbackgroundが途中で切れてしまうことがあります。
floatした要素の高さは親要素の高さに反映されない
flootした要素は親要素の高さに反映されないためclear: both;をあてたりしていました。
一番下に何か要素が入れられる場合はよいのですが,入れられない場合はちょっと困ります。
clearfix
こうしたややこしい問題を解決してくれるのが clearfix という手法です。:afterの疑似要素とcontentプロパティで新たなボックスを入れ,これにclearをあてるものです。
使い方
CSS
width:100%;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
とcssに記述
HTML
親要素に
class=”clearfix”
と指定します。
これでfloatした要素をclear:both;などを使わずに
float解除できます。
ぜひ参考にしてみてください。
sssss