アイキャッチ

clear:bothを使わずclearfixでfloat解除する方法


Web制作の現場で頻繁に使用されるfloatプロパティ。
その解除方法にお悩みの方も多いのではないでしょうか。
今回は、いくつかある解除方法の中から「clearfix」を使用してfloatを解除する
方法を説明していきます。

 

clearfixとは

一言でいうと、
親ボックスがfloat要素全体を含むように変えるためのCSSハックのことです。

floatを指定すると、親ボックスは、floatが指定された要素の高さを無視します。
そのため、全体の高さがキープされず、下の図のように崩れたレイアウトになっ
てしまうのです。
1_float

それを解決するために、親ボックスがfloat要素全体を覆うようにすることによっ
て全体の高さをキープできるようにしたものがclearfixというものです。
2_clearfix

 

clearfixの書き方

それでは、clearfixでfloatを解除する方法を説明していきます。

 

1.HTMLコードにfloatプロパティを設定する。

 

– HTML記述 –

 

– CSSコード記述 –

 

– 表示結果 –
親ボックスであるheaderの高さがキープされず、崩れたレイアウトになってし
まいます。
1_float

 

2.floatを解除するためにclearfixのCSSコードを追加する。

 

– CSSコード記述 –

 

– 表示結果 –
親ボックスであるheaderがfloat要素全体を含んだことで高さをキープできるよ
うになりました。
2_clearfix

 

– 解説-
6_afterclearfixは、「擬似要素の:after」と「contentプロパティ」を組み合わせること
で、親ボックスの末尾に新らしくインライン要素を生成します。
そのボックスに対して「display:block;」の設定を行い、親ボックスの横幅に
広がるブロック変換した後、clearプロパテイで、フロート解除を行います。
つまり、親ボックスの末尾に新しくボックスを追加することによって本来の高
さをキープすることができるというわけです。

 

まとめ

いかがでしたでしょうか。
難易度が高いと言われるclearfixでのfloat解除もひとつひとつ見ていけば、そ
れほど難しいものではありません。
時代とともに進化を続けてきたテクニックの更なる進化が楽しみですね。

 

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Articledl dt ddを上手く使いこなすためのテクニクまとめ