1055

<div>通常、 のような要素はコンテンツに合わせて大きくなりますが、この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

次のように、親要素内に「スペーサー」要素を追加します。

<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

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

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

長所: 余分な div は必要ありません。
短所: ハックのようです - それはoverflowプロパティの目的ではありません。

コメント? 他の提案？

4

15 に答える 15

552

解決策 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。

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

解決策 2:

ソリューション 1 の適応が提案されており、次のとおりです。

デモ: 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%;
}

このソリューションは IE5.5 と下位互換性があるはずですが、IE6 でのみテストされています。

于 2012-07-22T04:48:22.187 に答える
81

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

于 2008-10-20T15:20:24.143 に答える
20

overflow:auto親をつけるのではなく、overflow:hidden

私がウェブページ用に最初に書く CSS は、常に次のとおりです。

div {
  overflow:hidden;
}

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

于 2010-03-03T17:25:10.660 に答える
18

この問題は、フロート要素がコンテナー ボックス内にある場合に発生します。その要素は、コンテナーの高さをフロート要素に合わせて自動的に調整しません。要素がフロートされると、フロートがフローから削除されるため、その親には要素が含まれなくなります。次の 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%;
}

デモンストレーション:)

于 2010-03-03T17:33:17.943 に答える
15

clearfix には複数のバージョンがあり、主な作成者はNicolas GallagherとThierry Koblentzです。

古いブラウザーのサポートが必要な場合は、次の 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;
}
于 2014-11-29T18:40:42.097 に答える
9

理想的な解決策はinline-block、フローティングではなく列に使用することです。inline-block（a）通常はインラインである要素にのみ適用する場合（例span）、ブラウザのサポートはかなり良いと思います。（b）-moz-inline-boxFirefox用に追加します。

特定の要素をネストするときに多くの問題が発生したため、FF2のページも確認してください（驚くべきことに、これはIEのパフォーマンスがFFよりもはるかに優れている1つのケースです）。

于 2009-03-05T23:41:20.610 に答える
9

コードは完全にセマンティックではありませんが、フロートを含むすべてのコンテナーの下部に「クリア div」と呼ばれるものを配置する方が簡単だと思います。実際、すべてのプロジェクトのリセット ブロックに次のスタイル ルールを含めました。

.clear 
{
   clear: both;
}

IE6 用にスタイルを設定している場合 (神があなたを助けてくれます)、このルールに 0px の行の高さと高さも与えたいと思うかもしれません。

于 2008-10-20T18:57:43.767 に答える
9

奇妙なことに、これに対する完全な答えはまだ誰も出ていません。

解決策 1:クリア: 両方

clear:both; スタイルのブロック要素を追加します。その上に置くと、そのポイントを過ぎたフロートがクリアされ、その要素の親が崩壊するのを防ぎます。http://jsfiddle.net/TVD2X/1/

長所: 要素をクリアすることができ、下に追加する要素は、上のフロート要素と有効な css の影響を受けません。

短所: フロートをクリアするために別のタグが必要で、マークアップが肥大化します。

注: IE6 にフォールバックし、禁欲的な親 (つまり入力要素) で動作するようにするには、:after を使用できません。

解決策 2:表示: テーブル

表示の追加:テーブル; フロートを肩をすくめて正しい高さで表示するように親に追加します。http://jsfiddle.net/h9GAZ/1/

長所: 余分なマークアップがなく、すっきりしています。IE6+で動作

短所: IE6 および 7 ですべてが正常に動作するようにするには、無効な css が必要です。

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

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

これらの修正は、サポートされている最低のブラウザー (世界全体で 1% を超える使用率 (IE6)) まで機能します。

オーバーフローを非表示にするとコンテンツは表示されますが、要素が折りたたまれるのを防ぐことはできないため、質問には答えません。インライン ブロックを使用すると、結果にバグが生じたり、子のマージンがおかしくなったりすることがありますが、テーブルの方がはるかに優れています。

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

cssが無効です

無効な css は誰にも害を及ぼすことはありません。実際、現在ではそれが標準になっています。ブラウザのプレフィックスを使用することは、ブラウザ固有のハックを使用するのと同じくらい無効であり、エンド ユーザーにまったく影響を与えません。

結論は

上記の両方のソリューションを使用して、要素が正しく反応し、互いにうまく機能するようにします。同じことをお願いします。

于 2012-10-17T13:38:07.867 に答える
6

該当する場合は2と4を使用します（つまり、コンテンツの高さがわかっている場合、またはオーバーフローしても問題がない場合）。他の場所では、ソリューション3を使用します。ちなみに、最初のソリューションは、同じダミー要素を使用するため、セマンティックではないため、3（私が見つけることができる）よりも利点がありません。

ちなみに、私は4番目の解決策がハックであることを心配していません。CSSのハックは、その根本的な動作が再解釈またはその他の変更の対象となる場合にのみ有害になります。このように、あなたのハックが機能することは保証されません。ただし、この場合、ハックは本来あるべき正確な動作に依存しoverflow: autoます。フリーライドをヒッチハイクしても害はありません。

于 2008-10-20T15:24:31.357 に答える
4

最もよく知られているソリューションの 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;
}
于 2012-07-21T18:05:52.123 に答える
3

これを下部の親divに追加します

 <div style="clear:both"></div>
于 2014-07-01T18:06:25.680 に答える
2

より意味的に正しいと思われる別の解決策は、フロートされた内部要素を「display: inline」に変更することです。この例と、このページに出くわしたときに私が取り組んでいたことは、両方ともスパンが使用されるのとほぼ同じ方法でフローティング div を使用しています。div を使用する代わりにスパンに切り替えるか、デフォルトで「display: inline」ではなく「display: block」である別の要素を使用している場合は、「display: inline」に変更します。これが意味論的に 100% 正しい解決策だと思います。

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

解決策 2 の明示的な高さの設定は、ボックスを描画して、ここに画像を配置したいと言っているようなものです。つまり、img タグを実行している場合はこれを使用します。

解決策 3 のスペーサーを追加してフロートをクリアすることは、コンテンツの下に余分な行を追加するようなものであり、周囲の要素も混乱させます。このアプローチを使用する場合、おそらく div を高さ: 0px に設定する必要があります。

解決策 4、overflow: auto は、ドキュメントのレイアウト方法がわからないことを認めており、何をすべきかわからないことを認めています。

于 2013-03-29T16:09:32.223 に答える
2

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

于 2012-09-23T17:21:27.150 に答える
0

最善の方法はclear:both、次の要素に設定することだと思います。

理由は次のとおりです。

1):afterセレクタは IE6/7 ではサポートされておらず、FF3 ではバグがあり
     ます。

2)overflow他のことをすることになっているので、このハックは十分に信頼できません。

作成者への注意: クリアにはハックはありません... クリアとは、浮動フィールドをスキップすることを意味します。CLEAR は HTML3 以来私たちと共にあります (おそらくもっと長いかもしれません) http://www.w3.org/MarkUp/html3/deflists.html 。 ...

于 2013-08-05T14:54:26.110 に答える