web-dev-qa-db-ja.com

浮遊物の親が倒れないようにするには？

<div>sのような要素は通常その内容に合うように大きくなりますが、floatプロパティを使用するとCSS初心者にとって驚くべき問題を引き起こす可能性があります。 浮動要素に非浮動親要素がある場合、親は折りたたまれます。

例えば：

<div>
  <div style="float: left;">Div 1</div>
  <div style="float: left;">Div 2</div>
</div>

この例の親divは 展開しない にその浮動した子を含める - それはheight: 0を持つように見えるだろう。

どうやってこの問題を解決しますか？

ここで解決策の網羅的なリストを作りたいです。ブラウザ間の互換性の問題に気づいている場合は、それらを指摘してください。

解決策1

親を浮かべる.

<div style="float: left;">
  <div style="float: left;">Div 1</div>
  <div style="float: left;">Div 2</div>
</div>

長所 ：セマンティックコード。
短所 ：あなたはいつも親を浮遊させたくないかもしれない。たとえあなたがそうしたとしても、あなたは両親の親を浮かべるのでしょうか？あなたはすべての先祖要素を浮かべる必要がありますか？

解決策2

親に明示的な高さを与えます。

<div style="height: 300px;">
  <div style="float: left;">Div 1</div>
  <div style="float: left;">Div 2</div>
</div>

長所 ：セマンティックコード。
短所 ：柔軟ではない - コンテンツが変更された場合やブラウザのサイズが変更された場合は、レイアウトが崩れます。

解決策3

次のように、親要素の内側に "spacer"要素を追加します。

<div>
  <div style="float: left;">Div 1</div>
  <div style="float: left;">Div 2</div>
  <div class="spacer" style="clear: both;"></div>
</div>

長所 ：コーディングが簡単。
短所 ：意味が異なります。スペーサーdivはレイアウトハックとしてのみ存在します。

解決策4

Parentをoverflow: autoに設定します。

<div style="overflow: auto;">
  <div style="float: left;">Div 1</div>
  <div style="float: left;">Div 2</div>
</div>

長所 ：追加のdivは必要ありません。
短所 ：ハックのように思われる - これはoverflowプロパティの目的ではありません。

コメント？他の提案？

htmlcsslayoutcss-floatclearfix
956
Nathan Long

解決策1：

最も信頼性が高く、目立たない方法はこれです。

デモ： http://jsfiddle.net/SO_AMK/wXaEH/ /

HTML：

<div class="clearfix">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>​

CSS：

.clearfix::after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

小さなCSSターゲティングでは、クラスを親のDIVに追加する必要すらありません。

このソリューションはIE 8との後方互換性があるため、古いブラウザが失敗することを心配する必要はありません。

解決策2：

解決策１への適応が提案されており、それは以下の通りである。

デモ： http://jsfiddle.net/wXaEH/162/ /

HTML：

<div class="clearfix">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>​

CSS：

.clearfix::after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
   *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div class="ie7-clear"></div>' );
}

.ie7-clear {
    display: block;
    clear: both;
}

この解決策はIE5.5との後方互換性があるように見えますが、テストされていません。

解決策3：

折りたたまずに通常のブロック要素をエミュレートするためにdisplay: inline-block;とwidth: 100%;を設定することも可能です。

デモ： http://jsfiddle.net/SO_AMK/ae5ey/ /

CSS：

.clearfix {
    display: inline-block;
    width: 100%;
}

このソリューションは、IE 5.5との下位互換性がありますが、IE 6でのみテストされています。

514
A.M.K

私は通常overflow: autoトリックを使います。厳密に言えば、それはオーバーフローの意図された使用法ではありませんが、 は ちょっと関係しています - 確かに覚えやすくするのに十分です。この例のIMOでは、float: left自体の意味が、オーバーフローよりも大幅にさまざまな用途に拡張されています。

71
Bobby Jack

overflow:autoを親に置くのではなく、overflow:hiddenを置く

私がどのWebページでも最初に書いたCSSは、常に：

div {
  overflow:hidden;
}

それから私はそれについて心配する必要はありません。

20
tybro0103

浮動要素がコンテナボックス内にあるときに問題が発生しますが、その要素がコンテナの高さを浮動要素に自動的に調整することはありません。要素がフローティング状態になると、そのフロートはフローから削除されるため、その親はその要素を含まなくなります。あなたはそれを修正するために2つの方法を使うことができます：

  • { clear: both; }
  • clearfix

何が起こっているのか理解したら、それを「クリアフィックス」するために以下の方法を使用してください。

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

デモ:)

18
Sarfraz

主要な作者としてNicolas GallagherおよびThierry Koblentzを使用して、clearfixにはいくつかのバージョンがあります。

古いブラウザをサポートしたい場合は、このclearfixを使用するのが最善です。

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

SCSSでは、次のテクニックを使うべきです：

%clearfix {
  &:before, &:after {
    content:" ";
    display:table;
  }

  &:after {
    clear:both;
  }

  & {
    *zoom:1;
  }
}

#clearfixedelement {
    @extend %clearfix;
}

古いブラウザのサポートを気にしないのであれば、もっと短いバージョンがあります。

.clearfix:after {
    content:"";
    display:table;
    clear:both;
}
14
John Slegers

コードは完全に意味論的なものではありませんが、フロートが入っているすべてのコンテナーの下部に「クリアdiv」と呼んでいるものを使用する方が簡単だと思います。実際、私はすべてのプロジェクトのリセットブロックに次のスタイルルールを含めました。

.clear 
{
   clear: both;
}

あなたがIE6のスタイルを整えているなら（神があなたを助けて）、あなたはこの規則に0pxの行の高さと同様に高さを与えたいと思うかもしれません。

9
Bryan A

誰もこれについて完全な答えを思い付いていない、ああまあそれはそうだね。

解決策1： クリア：both

スタイルが明確なブロック要素を追加します。その上に浮かぶのはそのポイントを過ぎたフロートをクリアし、その要素の親が崩壊するのを止めるでしょう。 http://jsfiddle.net/TVD2X/1/ /

長所：あなたが要素をクリアすることを可能にし、あなたが下に追加する要素は上の浮遊要素と有効なCSSの影響を受けません。

短所：フロートをクリアするための別のタグが必要で、マークアップが膨らんでいます。

注：IE6にフォールバックし、それが禁欲的な両親（つまりinput要素）に対して機能するようにするには、：afterを使用することはできません。

解決策2： display：table

表示を追加する：テーブル。それがフロートからすくめて正しい高さで表示するように親に。 http://jsfiddle.net/h9GAZ/1/ /

長所：追加のマークアップはなく、はるかに優れています。 IE6 +で動作します

短所：IE6と7ですべてがうまく動作するようにするには、無効なCSSが必要です。

注：IE 6および7 width autoは、幅が100％+パディングになるのを防ぐために使用されます。これは、新しいブラウザには当てはまりません。

他の「解決策」に関するメモ

これらの修正は、サポートされている最低のブラウザ、つまり世界全体で1％以上の使用率（IE6）に戻ります。

オーバーフローを非表示にしてもコンテンツは表示されますが、要素の折りたたみが妨げられることはないため、質問には回答しません。インラインブロックを使用すると、バグのある結果が得られたり、子供に余白があるなどの場合、tableのほうがはるかに優れています。

高さを設定することは崩壊を「防ぐ」のですが、それは適切な修正ではありません。

無効なCSS

無効なcssが誰かを傷つけることは決してありません。ブラウザのプレフィックスを使用することは、ブラウザ固有のハッキングを使用することと同じくらい無効であり、エンドユーザーにはこれまでのところ影響を与えません。

結論として

要素を正しく反応させ、お互いにうまく機能させるために、上記の両方の解決策を使用します。同じことをすることをお勧めします。

9
lededje

理想的な解決策は、カラムをフローティングではなくinline-blockにすることです。 （a）通常インラインである要素（例えばspan）だけにinline-blockを適用すれば、ブラウザサポートはかなり良いと思います。 （b）Firefoxに-moz-inline-boxを追加します。

FF2であなたのページもチェックしてください。特定の要素を入れ子にするときに私はたくさんの問題を抱えていました（驚くべきことに、これはIEがFFよりはるかに良いパフォーマンスです）。

9
DisgruntledGoat

該当する場合は2と4を使用します（つまり、コンテンツの高さがわかっている場合、またはオーバーフローしても問題がない場合）。それ以外の場所では、私は解決策3を選びます。ところで、あなたの最初の解決策は3を超える利点はありません（私が見つけることができる）。同じダミー要素を使うのでこれ以上意味がないからです。

ちなみに、私は4番目の解決策がハックであることを心配しません。 CSSのハックは、その根本的な振る舞いが再解釈または他の変更の影響を受ける場合にのみ有害になります。このように、あなたのハックはうまくいくとは限らないでしょう。しかし、この場合、あなたのハックはoverflow: autoが持つことを意図している正確な振る舞いに依存しています。フリーライドを妨げても害はありません。

6
Konrad Rudolph

私のお気に入りの方法は、親要素にclearfixクラスを使うことです

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    display: inline-block;
}

* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}
5
Christian Gray

最もよく知られている解決策の1つは、非意味的なhtml要素の代わりに疑似要素を使用するあなたの解決策番号3の変形です。

それはこのようになります...

.cf:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
}

あなたはそれをあなたのスタイルシートに置き、あなたが必要とするのはフロートを含む要素にクラス 'cf'を追加することだけです。

私が使っているのは、Nicolas Gallagherによる別のバリ​​エーションです。

それは同じことをしますが、より短く、きれいに見え、そしてかなり役に立つ別のことを成し遂げるために使われるかもしれません - 子要素のマージンがそれの親と折りたたまれるのを防ぎます。ここ http://nicolasgallagher.com/micro-clearfix-hack/ ）。

.cf:after {
    content: " ";
    display: table;
    clear: float;
}
4
banzomaikaka

一番下の親divにこれを追加する

 <div style="clear:both"></div>
3
Leons Kalapurakal

私がより意味的に正しいと思うもう一つの可能​​な解決策は 'display：inline'になるように浮遊内部要素を変更することです。この例と、このページに出くわしたときに取り組んでいたものはどちらも、スパンが使用されるのとまったく同じ方法で浮動小数点divを使用しています。 divを使う代わりに、spanに切り替えるか、デフォルトで 'display：inline'の代わりに 'display：block'を使っているなら、それを 'display：inline'に変更してください。私はこれが100％意味論的に正しい解決策だと思います。

親をフロートさせる解決策1は、本質的にフローティングされるドキュメント全体を変更することです。

解決策2、明示的な高さを設定することは、箱を描くことと私がここに絵を入れたいと言っていることに似ています。

解決策3、クリアフロートにスペーサーを追加することは、コンテンツの下に余分な行を追加することに似ており、周囲の要素も混乱させます。この方法を使用する場合は、divをheight：0pxに設定することをお勧めします。

解決策4、オーバーフロー：自動は、文書のレイアウト方法がわからないこと、および何をすべきかわからないことを認めていることを認めています。

2
Jonathan

オーバーフローをautoまたはhiddenに変更したときに発生する主な問題は、マウスの中ボタンですべてがスクロール可能になり、ユーザーがサイト全体のレイアウトをめちゃくちゃにする可能性があることです。

2
cssisashtandw3tooo

最善の方法はclear:bothを次の要素に設定することであると私は信じています。

これが理由です：

1）:afterセレクタはIE6/7ではサポートされておらず、FF3ではバグがあります。
：IE8 +とFF3.5 +でクリアすることだけに関心がある場合：afterはおそらくあなたにとって最善の方法です...

2）overflowは何か他のことをするはずなので、このハックは十分に信頼できません。

作者へのメモ：クリアするのに厄介なことは何もありません...クリアするとは、浮動フィールドをスキップすることを意味します。 CLEARはHTML3以来（私たちは知っている、おそらくもっと長い） http://www.w3.org/MarkUp/html3/deflists.html 、多分彼らはpageのように少し違う名前を選ばなければならない：newしかし、それは単なる詳細です...

0
jave.web