10

次のように、通常のフローから div を除外しながら float を使用するのを防ぐにはどうすればよいですか。

<div id="one">
    <div id="two"></div>
</div>

CSS:

#one {
    width: 100%;
    height: auto;
}

#two {
    width: 100px;
    height: 100px;
    position: relative;
    float: left;
}

現在、div "one" には高さがなく、div "two" は最初の div にないように見えます。

4

3 に答える 3

22

ああ、崩壊問題。ここにフロートに関する優れた記事がありますhttp://css-tricks.com/all-about-floats/ あなたの場合、追加します

overflow: auto

に#one

相対情報を以下に引用します。

フロートをクリアするためのテクニック

後続の要素がどうなるかを常に知っている状況にある場合は、clear: both; を適用できます。その要素に価値を置き、あなたのビジネスに取り掛かります。これは、手の込んだハックや追加の要素を必要とせず、完全にセマンティックにするため理想的です。もちろん、物事は通常そのようにうまくいくとは限らず、ツールボックスにフロート クリア ツールを追加する必要があります。

Empty Div メソッドは、文字通り空の div です。<div style="clear: both;"></div>. エレメントやその他のランダムなエレメントが使用されている場合もあります<br />が、div が最も一般的です。これは、ブラウザーの既定のスタイル設定がなく、特別な機能がなく、CSS で一般的にスタイル設定される可能性が低いためです。このメソッドは、その存在がページに対して文脈上の意味をまったく持たず、純粋に表示のためだけに存在するため、セマンティック純粋主義者によって軽蔑されています。もちろん、厳密な意味では彼らは正しいのですが、仕事は正しく行われ、誰も傷つけません。

オーバーフロー メソッドは、親要素のオーバーフロー CSS プロパティの設定に依存しています。親要素でこのプロパティが auto または hidden に設定されている場合、親は float を含むように拡張され、後続の要素に対して効果的にクリアされます。このメソッドは、追加の要素を必要としない場合があるため、美しくセマンティックにすることができます。ただし、これを適用するためだけに新しい div を追加することに気付いた場合、空の div メソッドと同様に意味がなく、適応性が低くなります。また、オーバーフロー プロパティは特にフロートをクリアするためのものではないことに注意してください。コンテンツを非表示にしたり、不要なスクロールバーをトリガーしたりしないように注意してください。

Easy Clearing Methodは、巧妙な CSS 疑似セレクターを使用(:after)してフロートをクリアします。親にオーバーフローを設定するのではなく、「clearfix」などの追加のクラスをそれに適用します。次に、この CSS を適用します。

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

これにより、フロートをクリアする親要素の後に、ビューから隠されている小さなコンテンツが適用されます。古いブラウザに対応するために追加のコードを使用する必要があるため、これがすべてではありません。

于 2013-09-20T00:24:05.430 に答える
1

ダイブ #one が崩壊するのを見ています。その要素の CSS にオーバーフロー値を追加すると、この問題が解決するはずです。

于 2013-09-20T00:16:21.820 に答える
0

これで問題が解決するはずです。両方の DIV に追加してみてください。

**テストのために、背景色を追加することをお勧めします。

jsFiddle の例はこちら!

position: relative;
float: left;
clear: none;
display: block;
于 2013-09-20T00:16:10.067 に答える