☰

フロート要素の親が折りたたまれないようにするにはどうすればよいですか? [重複] 質問する

tag-icon • tag-icon html css layout css-float clearfix
フロート要素の親が折りたたまれないようにするにはどうすればよいですか? [重複] 質問する

sのような要素は<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プロパティの目的ではありません。

コメント? その他の提案はありますか?

ベストアンサー1

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

: ...

.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>​

: ...

.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/

: ...

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

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

おすすめ記事