1

記事のリストがあるとします。一部の画像は右に浮かんでいてテキストがほとんどないため、画像は記事の外に浮かんで次の記事に流れ込み、混乱します。

記事内の要素が記事の外に浮かないようにするための正しい/好ましい/最良の方法は何ですか？

私はそれがoverflow:hiddenうまくいくことを知っていますが、これは正しい使用法ですか？それとも、偶然に私がやりたいことをするのはたまたまですか？

4

3 に答える 3

5

それを行うには3つの方法があります。

  1. あなたはoverflow:hiddenそれをするためのきれいな方法であることができます。

    • 長所：HTMLのセマンティクスを混乱させることはなく、「デッドエレメント」はありません。

    • 短所：コンテナに定義された寸法がある場合はコンテンツをクリップし、内部要素からシャドウをクリップします。

      div        <-- style="overflow:hidden"
    div    <-- floating children
    div    
div        <-- style="overflow:hidden"
    div    <-- floating children
    div

  2. 空白の要素を含めることができます。通常は、<div>フロートのあるコンテナの後にあります。これをでスタイリングしclear:bothます。

    • 短所：DOMに「デッドエレメント」がある。

      div
    div    <-- floating children
    div 
div        <-- style="clear:both"
div 
    div    <-- floating children
    div

  3. コンテナに「clearfix」クラスを:after追加し、疑似クラスを使用して「clearingdynamicdot/space」を追加できます。基本的には2番目のように機能しますが、を使用:afterして「clear：both」のスペースを挿入します。この記事ではそれについて説明します。

    • 長所：HTMLのセマンティクスを混乱させることはなく、「デッドエレメント」はありません。

    • 短所：「classitis」（クラスの乱用）:afterは、IE7以前ではサポートされていないため、CSSハックが使用されます

      div        <-- :after
    div    <-- floating children
    div
" "        <-- style="clear:both"
div        <-- :after
    div    <-- floating children
    div

3つのうちどちらでも使用でき、うまく機能します。私は通常1を使用します。コンテナに影がある場合、またはコンテナの寸法が固定されている場合は、3を使用します。方法3は、:afterどちらが新しいかによって異なります。このクリアフィックスをサポートするには、記事で説明されている古いCSSハックを使用します。

于 2012-05-27T21:10:39.633 に答える
2

記事の要素ごとに、を追加しclear: both;ます。これにより、次の記事で画像が「漏れ」ないようにするだけでなく、画像が途切れないようにすることができます。

于 2012-05-27T21:03:20.147 に答える
1

このリンクはあなたが尋ねたことを正確に説明しています。

オーバーフロー：非表示またはオーバーフロー：自動は、フロートリストアイテムを保持するナビゲーションバーや、フロートボックスの束があるアクション呼び出し領域などの小さな包含要素のフロートをクリアするための許容可能なソリューションです。

また、このリンクでは、overflow：hiddenを使用してデモでクリアする問題についても説明しています。

于 2012-05-27T21:12:07.103 に答える