1

しばらく前に友人から、正しいフロート要素が私のドキュメントの最初に来るように言われましたが、彼が私に伝えようとしていることを誤解したと思います。最初の左フロートdivがクリアされ、最初の右フロートdivの後にラインに表示されますか？

これは私が望むように機能しないスニペットです（互いに隣接する2つの左と2つの右のフロートスタック）

<div style="margin-left: auto; margin-right: auto; height: 600px; border: 1px solid black">
      <div style="width: 200px; height: 200px; background-color: red; float:right;"></div>
      <div style="width: 200px; height: 200px; background-color: green; float:right; clear: right"></div>

      <div style="width: 200px; height: 200px; background-color: yellow; float:left; clear: none"></div>
      <div style="width: 200px; height: 200px; background-color: purple; float:left; clear: left"></div>                   
  </div>

JSfiddle

そして、ここでは私が望むように機能しますが、ドキュメント内の要素の順序を移動する必要がありました。

<div style="margin-left: auto; margin-right: auto; height: 600px; border: 1px solid black">
      <div style="width: 200px; height: 200px; background-color: red; float:right;"></div>
      <div style="width: 200px; height: 200px; background-color: yellow; float:left; clear: none"></div>

      <div style="width: 200px; height: 200px; background-color: green; float:right; clear: right"></div>          
      <div style="width: 200px; height: 200px; background-color: purple; float:left; clear: left"></div>                   
  </div>

JSFiddle

すでに回答済みの場合は申し訳ありませんが、答えるのは簡単な質問だと思います。なぜ右フロート、左フロートにする必要があるのか​​知りたいのですが、次のフロートでは、右フロートか左フロートかは関係ありません。最初。

ありがとう

4

2 に答える 2

2

フロートについてのクイックチュートリアル

私はいくつかの例を設定し、http：//jsfiddle.net/audetwebdesign/xJSGZ/でフィドルを提供しました

要素がどのように配置されているかを説明するために、それぞれについて続けてコメントします。

例1では、フロートはなく、それぞれがブロック要素であるため、正方形は上下に積み重ねられます。

<h3>Example 1 - no floats</h3>
<div class="wrapper">
      <div class="square" style="background-color: red;"><b>1</b></div>
      <div class="square" style="background-color: green;"><b>2</b></div>
      <div class="square" style="background-color: yellow;"><b>3</b></div>
      <div class="square" style="background-color: purple;"><b>4</b></div>
</div>

例2では、​​div＃2を右にフロートします。この場合、div＃2はドキュメントフローから取り出されて右に強制され、div＃3はdiv＃1の直後に流れ込みます。

<h3>Example 2 - float right element #2</h3>
<div class="wrapper">
      <div class="square" style="background-color: red;"><b>1</b></div>
      <div class="square" style="background-color: green; float: right;"><b>2</b></div>
      <div class="square" style="background-color: yellow;"><b>3</b></div>
      <div class="square" style="background-color: purple;"><b>4</b></div>
</div>

例3では、div＃4を右にフロートします。div＃4はドキュメントフローのdiv＃3の後にあるため、div＃4は独自の行に配置されます。

<h3>Example 3 - float right element #2 and #4</h3>
<div class="wrapper">
      <div class="square" style="background-color: red;"><b>1</b></div>
      <div class="square" style="background-color: green; float: right;"><b>2</b></div>
      <div class="square" style="background-color: yellow;"><b>3</b></div>
      <div class="square" style="background-color: purple; float: right;"><b>4</b></div>
</div>

例4では、div＃1と＃2を右にフロートさせます。これらは両方ともフローから取り出され、右揃えで配置されます。次の2つの要素、div＃3と＃4が流入しますclear: right。div＃2で使用して、新しい行を開始するように強制しました。

<h3>Example 4 - float right element #1 and #2</h3>
<div class="wrapper">
      <div class="square" style="background-color: red; float: right;"><b>1</b></div>
      <div class="square" style="background-color: green; float: right; clear: right;"><b>2</b></div>
      <div class="square" style="background-color: yellow;"><b>3</b></div>
      <div class="square" style="background-color: purple;"><b>4</b></div>
</div>

ただし、左側に＃1と＃2、右側に＃3と＃4を取得するには、内部ラッパーを作成し、内部ラッパーのdivをそれぞれ左右にフロートさせます。

<h3>Example 5 -  float nested div's</h3>
<div class="wrapper">
    <div class="inner-wrapper" style="float:left;">
       <div class="square" style="background-color: red;"><b>1</b></div>
       <div class="square" style="background-color: green;"><b>2</b></div>
    </div>
    <div class="inner-wrapper" style="float: right;">
      <div class="square" style="background-color: yellow;"><b>3</b></div>
      <div class="square" style="background-color: purple;"><b>4</b></div>
    </div>
</div>

これらの例は、要素を配置するためにフロートを使用することの柔軟性と制限についてのアイデアを提供します。要素をフローティングすると、ブラウザがページレイアウトを構築する方法の順序が変わるため、要素の順序に違いがあります。

お役に立てれば。

于 2013-03-27T12:17:27.960 に答える
0

事実は次のとおりです。フロートした要素は、その直前のフロート要素から残っている残りのスペースを取ります。したがって、2つの要素（1つは右ともう1つは左）の平行を連続して配置しないと、平行にすることはできません。

例：

div1浮いているとdiv2水平平行になることはできませんotherdiv。

<div id="div1"></div>
<div id="otherdiv"></div>
<div id="div2"></div>
于 2013-03-27T11:04:54.860 に答える