右のフロート要素が、左のフロート要素および中央の要素と同じ水平方向の配置にとどまらないという問題がありました。右のフロート要素は右にフロートしていましたが、他の要素があった水平線の下に位置していました。
同じ div 内で要素をフローティングする場合 (たとえば、左に 1 つ、中央に 1 つ、右に 1 つ)、右の要素を左の要素の前に積み重ねる必要があります。
例：
<div id=container>
<div id="float-right"></div>
<div id="margin-auto"></div>
<div id="float-left"></div>
</div>
左と右の 2 つの要素しかない場合、以下のように水平に配置されます。
例を参照してください：jsfiddle
中央の要素を追加すると、右の要素が下に移動します。
例を参照してください：jsfiddle
ここで何が起きてるの ？
ここで簡単な例を提供します。真ん中を割り当てていないと仮定して、実際に何をするか見てdivみましょう。width
<div style="width:100%">
<div style="width:20px;height:20px;background-color:red;float:left;border: 3px solid #000;"></div>
<div style="height:20px;background-color:red;margin:0 auto auto;border: 3px solid #000;"></div>
<div style="width:20px;height:20px;background-color:red;float:right;border: 3px solid #000;"></div>
</div>
なぜこれが起こるのですか？
div要素であるblock-level場合、ページの水平方向のスペース全体を占有します。ご存知の場合はfloat、要素を使用するか、それleft以上right必要とせず100%、幅を使用して割り当てられたスペースまたはそれが保持するコンテンツのみを占有します。この場合、他のスペースを使用せずに幅をleft floated div取ります。20pxこれで、フロートされていない別のdivものがありますが、残りの使用可能な水平スペースが必要になり、right floated div要素が押し下げられます。
では、これを解決するにはどうすればよいでしょうか。
float全部左にするか、左か右divにすれば十分かもしれませんmiddle div float。2 、 1 を左に、その他を右にフロートさせたいことはわかっていますdivが、これは正しい方法ではありません。必要に応じて、要素を container 内にラップするdivか、使用できるのはposition: absolute;要素を正しく設定します。
ブロック レベルの要素がどのように機能するかを示すために、ここで別の例を紹介します。
divタグ内にネストされていると仮定しp(これは無効なので、実際には使用しないでください。これはデモンストレーション目的のためだけです)、div要素に幅を与えて、テキストがどのようにレンダリングされるかを確認します。
<p>Hello World, I don't want the <div>text to</div> break</p>
div {
width: 40px;
background: #f00;
}
widthto ブロック レベル要素を指定しても、段落が壊れます。
w3cから
デフォルトでは、ブロック レベル要素はインライン要素とは異なる形式になります。一般に、ブロックレベル要素は新しい行で始まりますが、インライン要素はそうではありません。
これは、HTML 仕様に従って要素がフロートされる方法が原因で発生します。要素は左から右に水平にフロートされます。浮動要素は可能な限り左端に表示されます。
はブロック レベルの要素であるためdiv、右側のすべてを押し下げますが、左側のすべてに対してスタックします。
あなたの例では、それを見ることはできませんが、div@ Mr. エイリアンのフィドル。
詳細については、仕様を参照してください。
divはブロック レベルの要素であり、div左側または右側のどちらにも浮かんでいないため、右を押し下げているため、他の要素を下に押していdivます。
これも浮かせると反対側の残りのスペースが空になるので、浮かせた右divが真ん中の横に座ることができますdiv
非浮動 div の上に両方の浮動小数点を置くと、必要なものが得られます。