html - 連打 - 浮かれた要素の親を崩壊から守る方法を教えてください。




parentnode 連打 (11)

この質問には既に回答があります:

<div>のような要素は通常コンテンツに合わせて成長しますが、 floatプロパティを使用すると、CSS初心者にとって驚くべき問題が発生する可能性があります。 浮動要素に float 親要素がある場合、親要素は折りたたまれます。

例えば:

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

この例の親divは、floatされた子を含むように展開されません 。height height: 0を持つように見え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

親をoverflow: auto設定します。

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

長所 :余分なdivを必要としません。
短所 :ハックのように思える - それはoverflowプロパティの記載された目的ではありません。

コメント? その他の提案?


解決策1:

最も信頼性が高く控えめな方法は、次のように見えます。

デモ: http://jsfiddle.net/SO_AMK/wXaEH/ : 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/ : 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;を設定display: inline-block;こともできdisplay: inline-block; width: 100%; 通常のブロック要素をエミュレートし、折りたたむことはありません。

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

CSS:

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

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


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

どのWebページでも最初に書くCSSは、常に次のとおりです。

div {
  overflow:hidden;
}

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


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

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


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

親を浮動させる解決策1は、本質的に浮動するように文書全体を変更することです。

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

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

ソリューション4、オーバーフロー:自動、あなたは文書をレイアウトする方法がわからず、あなたは何をすべきか分からないと認めています。


キーフィックの Nicolas GallagherThierry 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;
}

コードは完全に意味論的ではありませんが、浮動小数点型の浮動小数点数を持つすべてのコンテナの下部にある「クリアリングdiv」と呼ぶ方が簡単です。 実際、すべてのプロジェクトのリセットブロックに次のスタイルルールを追加しました。

.clear 
{
   clear: both;
}

IE6のスタイリング(神が助けてくれます)をしている場合は、このルールに0pxの線の高さと高さを設定することもできます。


奇妙な誰もこれについての完全な答えをまだ思い付いていません、ああ、よくここにあります。

解決策1: クリア:両方

スタイルclearを持つブロック要素を追加する:both; その上にフロートをクリアし、その要素の親を崩壊させないようにします。 http://jsfiddle.net/TVD2X/1/

長所:要素をクリアすることができます。下に追加した要素は、上記の浮動要素や有効なCSSによって影響されません。

短所:フロート、bloatingマークアップをクリアするには別のタグが必要です。

注:IE6にフォールバックし、それが禁断の親(つまりinput要素)で動作するためには:afterを使用することはできません。

ソリューション2: 表示:テーブル

表示を追加する:table; フロートから肩をすくめて正しい高さで表示させるために親に送る。 http://jsfiddle.net/h9GAZ/1/

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

短所:IE6と7ですべてがうまくいくことを確認するには、無効なCSSが必要です。

注意:IE6と7の幅の自動は、幅が100%+パディングでないようにするために使用されます。これは新しいブラウザでは当てはまりません。

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

これらの修正はサポートされている最低限のブラウザー(全世界で1%以上の使用率(IE6))に戻ります。これは、afterはそれをカットしないことを意味します。

Overflow hiddenはコンテンツを表示しますが、要素が崩壊するのを防ぐものではありませんので、その質問には答えません。 インラインブロックを使用するとバグのある結果が得られます。奇妙なマージンを持つ子供などは、テーブルがはるかに優れています。

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

無効なCSS

無効なCSSは誰にも決して傷つけることはなく、実際は今や標準です。 ブラウザの接頭辞を使用することは、ブラウザ固有のハッキングを使用する場合とまったく同じように無効であり、エンドユーザーにそれほど影響を与えません。

結論として

私は、上記の両方のソリューションを使用して、要素を正しく反応させ、相互にうまくやり合うようにします。同じことをやることを強くお勧めします。


最もよく知られた解決策の1つは、非意味的html要素の代わりに擬似要素を使用するソリューション番号3のバリエーションです。

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

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

これをスタイルシートに置き、浮動小数点を含む要素に 'cf'クラスを追加するだけです。

私が使用しているのは、ニコラス・ギャラガーの別のバリエーションです。

それは同じことですが、もっと短くて見た目が綺麗で、別のものを達成するために使われるかもしれません - 子要素のマージンが親のものとならないようにしましょう。こちらhttp://nicolasgallagher.com/micro-clearfix-hack/ )。

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

私の好きな方法は、親要素にclearfixクラスを使用することです

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

.clearfix {
    display: inline-block;
}

* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}

私は、最善の方法はclear:bothすることだと考えていますclear:both次の要素のclear:bothに。

理由は次のとおりです。

1) :after AfterセレクターはIE6 / 7ではサポートされず、FF3ではバグがありますが、
あなたがIE8 +とFF3.5 +についてのみ気にしているのなら、afterはおそらくあなたのために最高です...

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

著者に注意してください:クリアに何かのハッキーはありません...クリアすると、浮動フィールドをスキップすることを意味します。 CLEARはHTML3(誰が知っている、おそらくさらに長い)から、私たちと一緒にいるhttp://www.w3.org/MarkUp/html3/deflists.html 、多分彼らはページのような少し別の名前を選ぶべきだったかもしれません:新しい、 ...


私は適用可能な2と4を使用しています(つまり、コンテンツの高さを知っているとき、またはあふれても害がない場合)。 ところで、最初のソリューションは、同じダミー要素を使用するため、それ以上のセマンティックではないため、3つ以上の利点はありません(私は見つけることができます)。

ところで、私は4番目の解決策がハックであることに心配しません。 CSSのハックは、基本的な振る舞いが再解釈やその他の変更を受ける場合にのみ有害です。 この方法では、あなたのハックは動作することが保証されません。 しかし、この場合、あなたのハックはoverflow: autoする正確な振舞いに依存しています。 自由な乗り心地を損なうことに害はありません。





clearfix