clearfixとは？ 使い方 効かない時の確認事項【動画で説明】
新しいもの覚えられない。
ぴよさく
私も最初そうでした。
理解しにくい分、一回ちゃんと理解することが早道です。
スポンサードサーチ
clearfix とは? (定義)
clearfixとは、擬似要素を使用した手法で 「. clearfixクラス」とはfloatを使用した際の回り込み解除するために使うクラスです。
なのでプロパティでもないのかな。
トリッキーな位置づけだとは思います。
clear bothに変わるものでもあります。
clearfixの使い方 考え方
WEBエンジニアの勉強したての頃、clearfixが効かないってことがよくありました。
そして、絶望を感じていました。
WEBエンジニア初心者の方はそう思う方結構いるんじゃないでしょうか。
今、簡単に使えるようになった私は、
考え方を理解することで解決できると考えています。
というのも
実務を経験しているとすぐわかるようになるんです。
floatを使う機会が増えると、clear bothを使う面倒がわかりますので、
clearfixを本気で理解するようになります。
わからないというフェイズからすぐに脱します。
スポンサードサーチ
clearfixの使い方 どこに効かせる？
効かせる場所がわかれば理解しているということ。
clearfixって意味わからんって方に、
図解・ソース・動画、で説明していきます。
是非、参考に使ってください。
float 回り込み解除（まず理屈抜き）
フロートが効いているボックスの親ボックスにclass=”clearfix”をくっつける
まずそう覚えるのがおすすめです。
上の図解で言うと、灰色のボックスにclass=”clearfix“指定します。
フロートだけ効いてたら、後続のボックスが下から滑り込んでくるじゃないですか。
「フロートが効いているボックスをclearfixを効かせた親ボックスで囲い込む」
ことでfloatの回り込み回避できます。
だいたいfloatを鉄板で勉強すると思います。
float解除方法とかもいろいろ勉強する中でclearfixは実務では使いやすいので覚えてみてください。。
実際にソース記述してみましたので、下で確認してみてください。
スポンサードサーチ
clearfix 使い方 実際のソース（動作を見て感覚的に）
赤矢印のところをクリックすると、詳細がみれます。
コード消したりした時の動きもみれますので、
floatを消したりして、動きの確認をしてみてください。
動きを見て、感覚でつかみます。
細かいこと抜きにして、ここで紹介したソースを作った流れを動画に撮影しているので、公開します。
次の項目に進んでください。
動画（経験者を見る）
説明用のソースを作った流れなので、clearfixとかfloatの関係とかも全体像がわかっていいと思います。
※途中からの動画です。申し訳ない。
説明をどんどん頑張っていきたいのですが、わかりましたでしょうか。
スポンサードサーチ
clearfix テンプレ 【貼り付け用】
content: “”;
display: block;
clear: both;
}
ぴよさく
制作していく過程で、任意でclass=”clearfix”を指定したら、いつでも効かせることができるからですよ。
clearfix 使い方 まとめ
実務経験にふれて、結局、clearfixとかfloatはよく使います。
また、既存のサイトでも使われているので、避けて通れないと思ています。
グローバルメニューとかになるとfloatよりflexboxとかを使うのが主流？
主流かわからんけど、楽だと思います。
最近はcssも進化しすぎて楽になってますからね～って、そうゆう視点をもってWEBエンジニアの修業をした方がいいと思いますよ。
最終的にAIに飲み込まれてしまうことも想定して、目標は高くがんばっていきましょう