この記事を読むのに必要な時間は約 9 分です。
floatを解除する方法で一番手っ取り早い「clearfix(クリアフィックス)」の記述方法を解説します。
コピペして使うと実装に1分かかりません!
この記事の目次
clearfixのソースです。
コピペして使えば1分で実装できます。
.clearfix:after {
content: "";
display: block;
clear: both;
}
.clearfix:before {
content: "";
display: block;
clear: both;
}
.clearfix {
display: block;
}
クラス名に「cf」や「clear-fix」等も見かけますが、私は「clearfix」を使っています。
Google Chrome、Firefox、Safari、Opera、Microsoft Edgeの最新バージョン、IE11以降に対応。
一番新しいブラウザ使っておけば間違いないです。
しかし今時わざわざIEなんて使っている人、いるのだろうか…?
clearfixの使いどころの例です。
まずはclearfixを使用しない例を紹介します。
デモ
赤と青のdiv要素が無くなった状態なので、黄色のdivがヘンな場所に表示されています。
HTML
<div class="float_container">
<div class="float_left">floatで左寄せのdiv</div>
<div class="float_right">floatで右寄せのdiv</div>
</div>
<div class="float_bottom">上記floatで左右に配置した要素の下に置きたいdiv</div>
CSS
.float_container{
width:100%;
}
.float_left{
float:left;
width:45%;
background-color:red;
padding:50px 0;
color:#fff;
text-align:center;
}
.float_right{
float:right;
width:45%;
background-color:blue;
padding:50px 0;
color:#fff;
text-align:center;
}
.float_bottom{
background-color:yellow;
padding:50px 0;
text-align:center;
}
先程のソースにclearfixを適用した例です。
デモ
clearfixを適用すると回り込みが解除されて思い通りのレイアウトが可能になります。
HTML
<div class="float_container clearfix">
<div class="float_left">floatで左寄せのdiv</div>
<div class="float_right">floatで右寄せのdiv</div>
</div>
<div class="float_bottom">上記floatで左右に配置した要素の下に置きたいdiv</div>
float_containerのdiv要素にclearfixを追加しました。
CSS
.clearfix:after {
content: "";
display: block;
clear: both;
}
.clearfix:before {
content: "";
display: block;
clear: both;
}
.clearfix {
display: block;
}
.float_container{
width:100%;
}
.float_left{
float:left;
width:45%;
background-color:red;
padding:50px 0;
color:#fff;
text-align:center;
}
.float_right{
float:right;
width:45%;
background-color:blue;
padding:50px 0;
color:#fff;
text-align:center;
}
.float_bottom{
background-color:yellow;
padding:50px 0;
text-align:center;
}
さらにWEB制作やプログラミングについて学習したい方・転職を目指されている方は、エンジニア養成スクールやWebデザインスクールで集中的に学ぶと効率的かつ確実です。
独学だと初期段階でつまづき嫌になってしまう事も多々あります。
スクールだと現役のプロによる手厚いサポートで安心して最新のWeb開発について学ぶことができます。
下記で多くのスクールの中から講師の質・授業カリキュラムの質・転職成功率が高く、本当に受講する価値のあるスクールのみ厳選して紹介しておりますので是非ご覧ください。
以上、clearfixの記述方法と使いどころについてでした。
以前のclearfixはもっと長かったのですが、今はこんなにシンプルに。
シンプルなのは良い事ですね。
ではまた!