なぜ 'clear：left'も右をクリアするのですか？

StackOverflow https://stackoverflow.com/questions/1037901

  •  10-07-2019
  •  | 
  •  

質問

CSSフローティングを機能させるのに苦労しました（頭の中で）。

次の例に注意してください：

<style type="text/css">
    div.container {
        width:500px;
    }
    div.left {
        float:left;
        clear:left;
    }
    div.right {
        float:right;
    }
</style>
<div class="container">
    <div class="left">leftdata 1</div>
    <div class="left">leftdata 2</div>
    <div class="right">rightdata 1</div>
    <div class="right">rightdata 2</div>
    <div class="right">rightdata 3</div>
    <div class="right">rightdata 4</div>
</div>

これにより、次の出力が得られます。

+--------------------------------------------------------------------+
| leftdata 1                                                         |
| leftdata 2         rightdata 1 rightdata 2 rightdata 3 rightdata 4 |
|                                                                    |
+--------------------------------------------------------------------+

しかし、私はこれを期待していました：

+--------------------------------------------------------------------+
| leftdata 1         rightdata 1 rightdata 2 rightdata 3 rightdata 4 |
| leftdata 2                                                         |
|                                                                    |
+--------------------------------------------------------------------+

明確な理由：左;右もクリアしますか？

私の目標：

clear：rightのみを追加します。クラスでマークされたDIVに：右。これにより、以下が生成されます。

<style type="text/css">
    div.left {float:left;clear:left;}
    div.right {float:right;clear:right;}
</style>

+--------------------------------------------------------------------+
| leftdata 1                                             rightdata 1 |
| leftdata 2                                             rightdata 2 |
|                                                        rightdata 3 |
|                                                        rightdata 4 |
+--------------------------------------------------------------------+
役に立ちましたか？

解決 

<style type="text/css">
    div.left {float:left;}
    div.right {float:right;}
    br.clear{clear:both;}
</style>

<div class="container">
    <div class="left">
         <div> data 1 </div>
         <div> data 2 </div>
         <div> data 3 </div>
    </div>
    <div class="right">
         <div> right data 1 </div>
         <div> right data 2 </div>
         <div> right data 3 </div>
    </div>
    <br class="clear" />
</div>

他のヒント

最初の例では、rightdata-divはドキュメントの後半に表示されるため、左のdivの下に配置されます。最初に配置すると、期待どおりの結果が得られます。

または、次の行に沿って何かを試すことができます：

<style type="text/css">
  div.left {
    float: left;
  }

  div.right {
    float: right;

  }
  div.container {
    width:500px;
    overflow: auto; /* to make sure .container expands vertically */
  }


<div class="container">
  <div class="left">
    <div>leftdata 1</div>
    <div>leftdata 2</div>
  </div>
  <div class="right">
    <div>rightdata 1</div>
    <div>rightdata 2</div>
    <div>rightdata 3</div>
    <div>rightdata 4</div>
  </div>
</div>

CSSでは、なんらかの愚かな理由で、フローティングdivをどの順序で配置するかが重要です。<！> lt; div class = <！> quot; right <！> quot; <！> gt; FIRSTにあるもの（左側のものを最初に置くのではなく）、右側に余分な改行はありません。

別のこと：cssのclearコマンドを誰でも使用するべきではないと思います。どうして？周囲の他のフロート要素の影響を受ける可能性があるためです。つまり、clear：bothは、currrent要素のフロート要素のスペースをクリアするだけでなく、ページ上の every フロート要素のスペースもクリアします。

overflow：autoを使用する方が良い解決策です。

必要なものを補完するコードを次に示します。


<style type="text/css">
    div.container {
        width:500px;
        overflow:auto;
    }
    div.left {
        float:left;
    }
    div.right {
        float:right;
    }
</style>
<div class="container">
    <div class="right">rightdata 1</div>
    <div class="left">leftdata 1</div>
    <br>
    <div class="right">rightdata 2</div>
    <div class="left">leftdata 2</div>
    <br>
    <div class="right">rightdata 3</div>
    <br>
    <div class="right">rightdata 4</div>
</div>

編集：実際、この状況では、cleardataもoverflow：autoも、leftdata / rightdata divの構成を作成するために厳密に必要ではありませんが、コンテナdivが必要な場合は 必要です。 divの高さまで拡張します。 clearまたはoverflow：autoがない場合、divの高さは、divに含まれる浮動divの高さに合わせて拡張されません。

あなたの最善の策は次のようなことをすることだと思います：

+--------------------------------------------------------------------+
|+------------+                                       +-------------+|
|| leftdata 1 |                                       | rightdata 1 ||
|| leftdata 2 |                                       | rightdata 2 ||
|+------------+                                       | rightdata 3 ||
|                                                     | rightdata 4 ||
|                                                     +-------------+|
+--------------------------------------------------------------------+

編集：ジョン・ミソスキアンが投稿したコードのように^^

質問に答えるには、

clear:left

は左をクリアしています。 float：left がある場合、 clear：left はクリアします。 float：left と float：right だけでは、列の書式設定が実際には行われないことに同意します。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top