0

cleafixでfloat対策する方法

clearfix

 

float をした要素の親要素の背景画像などが途中で切れてしまうことがありますが、これは、その子要素を float 指定している場合、高さを認識しないため親要素は float する子要素の手前で高さを判断してしまうことによる現象です。そこで、float する子要素を含む親要素に、子要素の最後まで高さを認識させるための方法をメモしておきます。

簡単なサンプルを用意しましたので、ひとつづつ確認していきます。

1.サンプルを確認

 

デモサンプル

[ HTML ]

画像を3枚 float:left; で並べる html をサンプルとして用意しました。

 

[ CSS ]

親要素の div#gallery に背景色 #cc9999 を指定。
子要素の p タグを float:left  で左寄せにしています。

 上記の記述の場合、どのように表示されるかというとこうなります。

 

 sample1

 

floatをした<p>要素の高さが反映されず背景の色が途中で切れてしまっています。これを<p>要素の最後まで反映させるにはいくつか方法があります。

 

2.解決策を確認

大きく分けて解決策は2つあります。

解決策1:  floatを解除した要素を追加する

 ひとつは float させた要素の後に float を解除した要素を追加する方法があります。

 

[ HTMLを追記 ]

<p>要素の後に「一覧を見る」のリンクを追加します。

 

[ CSSを追記 ]

 すると下記のように表示されます。

 

 sample2

 

この方法でも問題はありませんが、float する要素の後に何も入れる要素がない場合も考えられます。
その際は、次の方法で対処が出来ます。

 

解決策2: 親要素にclearfixを指定する

:after という擬似要素と content プロパティを使って新しくボックスを追加し、これに clear をあてがう方法になります。

 

[ HTMLを追記 ]

親要素の<div id=”gallery”>に .clearfix 指定を追加します。

 

[ CSSを追記 ]

 

簡単に説明すると親要素の#galleryの後に:after擬似要素を使って新たな要素を生成しています。サンプルでは、contentプロパティの値に「 (スペース)」を入れていますが、他の値でも問題はありません。さらにその要素をブロックレベル要素にしclear:bothでフロートを解除、height:0で高さなし、visibility:hiddenで非表示にしています。

IE6.7は擬似要素:afterがサポート対象外なので、「要素の幅か高さを指定した場合、floatした子要素の高さも含めて算出する」というIEのバグを利用して親要素の高さを反映させます。




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > cleafixでfloat対策する方法