-1

こんにちは、何かを学ぶと混乱することがあります。私は今その立場にいます。よろしくお願いします。

このアドレスで質問しました:なぜ <div class="clear"></div> を使用したのですか?

回答を得て受け入れた後 (コメント セクションにあるリンクも読みました)、2 番目と 3 番目の質問ができました。

関連する質問で与えられた入力コードによると、

  1. 以下のグリッド デモ コードで を使用しなかったのはなぜ<div class="clear"></div>ですか? ここでも、2 つのフローティング div 要素のセットが 2 つ存在するため、最後のフローティング div 要素<div class="clear"></div>の直後に使用するのは適切ではないでしょうか?

<div class="clear"></div>私は、コードが 2 つの場所 (直後<div class="col col_7">と直後)にあることを期待していることを明確に述べています。<div class="col col_4">

    <div class="row">
        <div class="col col_1">col_1</div>
        <div class="col col_7">col_7
            <div class="row">
                <div class="col col_3">col_3</div>
                <div class="col col_4">col_4</div>
            </div><!-- row -->
        </div>
    </div><!-- row -->
</div><!-- col_8 -->
  1. 受け入れられた回答の所有者は、次のように書いています。彼は 5 月の文法を使用して以来、私は削除<div class="clear"></div>し、IE9 と Chrome 25.0.1364.172; の出力に何も変更がないことを確認しました。彼が5月に書いた理由は何ですか? 古いブラウザ (特に古い IE バージョン)?
4

1 に答える 1

0

これは、HTMLのさまざまなクラス/ID/要素に関連付けられているCSSによって異なります。

<div class="clear"></div> 常にいくつかのcssが関連付けられています。つまり、次のとおりです。

.clear { clear: both; }

上記のCSSは、そのフローティングの問題を防止するものです。そうは言っても...上に示したように「クリアdiv」を使用することは、これを行う多くの方法の1つです。

特定のケースでは、次の HTML が与えられます。

<div class="row">
        <div class="col col_1">col_1</div>
        <div class="col col_7">col_7
            <div class="row">
                <div class="col col_3">col_3</div>
                <div class="col col_4">col_4</div>
            </div><!-- row -->
        </div>
    </div><!-- row -->
</div><!-- col_8 -->

「行」のクラスは、CSS でプロパティを持つ可能性が非常に高いです。clear: both;それは、クリア div を削除しても同じままである理由を説明します。基本的に、クリア div は必要ありませんでした。行クラスには、その問題の発生を防ぐために既にCSSがアタッチされているためです。

セレクターはおそらく次のようになります .row { clear: both; }。.rowクラスにはおそらく他の CSS も関連付けられています。別の非常に可能性の高いプロパティは、overflow: hidden; そのプロパティは、div と周囲の div が互いにどのように相互作用/動作するかにも影響を与える可能性があります。

要約すると、このフローティングの問題が発生するのを防ぐNOTのは HTMLです。 問題の発生を防ぐのは、HTML 要素<div class="clear"></div>に適用できるCSSプロパティと値です。clear: both;

いくつかのリソース: Overflow プロパティの CSS Wiki Clear プロパティの CSS Wiki

うまくいけば、これで問題が解決しますか？（しゃれハハを許してください）

于 2014-01-20T14:09:34.693 に答える