creatersnest132

【もうレイアウト崩れで悩まない】floatを解除する方法


CSSで2カラムや3カラムのレイアウトを構築する場合に、
floatプロパティを使用します。
しかし、floatを使用することによって、親要素の背景が表示されないなどの
レイアウト崩れが起きてしまうことがあります。

今回はfloatプロパティを解除してレイアウトの崩れを解除する方法を
紹介します。

floatプロパティを使用してよく見られる問題

レイアウトが崩れる問題として、親の背景が表示されないというものがあります。

floatプロパティは、親要素の中にある子要素にfloatプロパティを設定すると、
親要素の高さが0になる仕様になっています。

そのためレイアウトが崩れてしまいます。
以下にソースを示して実行してみます。

HTML

CSS

float1

実行すると図のようにconteinerで背景にしたい要素が消えてしまい、
float要素の下に表示したいfooterboxが上にきてしまい、
レイアウトが崩れてしまいます。

floatの解除

floatによるレイアウト崩れを解除するにはいくつか方法があります。

1.空要素を挿入する

一番簡単な方法は、子要素に空の「clearプロパティ」を設定することです。
float要素の一番下に設定することで、「floatを解除した」と認識されます。

clearプロパティは、clearプロパティを適用したボックスに
クリアランスが導入され、margin-topプロパティを自動的に
ボックスの高さまで調整してくれます。

なおclearプロパティとmargin-topプロパティが同時に指定されている場合は、
clearプロパティが優先されます。

 

2.:after擬似要素でfloatを解除する

CSS内に「:after擬似要素」を指定することで、floatを解除する方法です。
floatした最後の子要素の後続の要素にブロックレベル要素の空のコンテンツを与え、
clearプロパティでfloatを解除します。

clearfixと呼ばれる方法です。
.clearfixクラス」を、floatプロパティを使用している親要素に指定します。

HTML

CSS

「:after」によって生成されたボックスに、
display: block;」と「clearプロパティ」を設定します。

IE7以前やNetScapeでは「contentプロパティに何らかの
文字が入っていないとボックスが生成されない」というバグがありました。
そのためcontentプロパティに目立ちにくい「.(ドット)」を使用します。

 

3.mycro clearfix

IE7以前やNetScapeなどほとんど使われなくなった古いブラウザは
不要になってきたため、もっとコードをコンパクトに書く事ができます。

HTML

CSS

1~3の方法を実行することで、以下の結果になります。

float2

 

 

まとめ

floatプロパティは便利な反面、設定の仕方を間違えるとレイアウトが
崩れてしまうといった困った面もあります。

今回紹介したのはあくまでも1例なので、floatプロパティを正しく理解して
使用すれば、レイアウトに悩まされることもないでしょう。

floatプロパティの細かい仕様については、W3Cのサイト等を参考にしてください。

 

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

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

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


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next Articleデザインの幅が広がる!CSS3で角丸を表現できるようになろう!