浮動小数点の同じ行にいないdiv：左div

Question

なぜ#rightはfloat: left div #leftと同じ行にとどまっていませんか？#rightの幅をに設定しないと、動作は正常です（下の2番目のコードスニペットを参照）。

* { margin:0; padding: 0; } 
 
#left {background-color: green; float: left; width: 200px; } 
 
#right {background-color: blue; width: 200px; }

<div id="menu"> 
 
    <div id="left">Left</div> 
 
    <div id="right">Right</div> 
 
</div>

奇妙なことは、私は#rightのための任意の幅を入れていないとき、それは動作しますが、です。 #rightの幅設定を追加すると、すべてが変更されるのはなぜですか？

* { margin:0; padding: 0; } 
 
#left {background-color: green; float: left; width: 200px; } 
 
#right {background-color: blue; }

<div id="menu"> 
 
    <div id="left">Left</div> 
 
    <div id="right">Right</div> 
 
</div>

注：質問は本当にここにある：なぜwidth変更ラッピング/ラッピング不可設定のでしょうか？これに対する答えはthis related questionでは明白ではありません。

Answer 1

<div>はブロックスタイルの要素なので、左側にフローティングされても、残りのブロックはまだブロックであり、それ自身の行にレンダリングされます。

彼らはどちらか、同じ行にレンダリングinline-blockにディスプレイを設定するか、あまりに秒1をフロートにするには：

* { margin:0; padding: 0; } 
 
#left {background-color: green; float: left; width: 200px; } 
 
#right {background-color: blue; width: 200px; float: left}

<div id="menu"> 
 
    <div id="left">Left</div> 
 
    <div id="right">Right</div> 
 
</div>

Answer 2

あなた以外にmargin-left: 200px;の追加は、DIVを浮かべ、それが動作します

* { margin:0; padding: 0; } 
 
#left {background-color: green; float: left; width: 200px; } 
 
#right {margin-left: 200px;background-color: blue;}

<div id="menu"> 
 
    <div id="left">Left</div> 
 
    <div id="right">Right</div> 
 
</div>

更新

フロートを使用して、一方がフロートと共に使用した場合の要素は、特定の方法で動作させるブロックフォーマット文脈（BFC）をトリガすることができます。インラインブロック：ここ

は、ディスプレイを使用して

• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
• How does the CSS Block Formatting Context work?
• http://lucybain.com/blog/2015/css-block-formatting-context/
• http://tech.vg.no/2013/09/26/css-block-formatting-context/
• http://www.sitepoint.com/understanding-block-formatting-contexts-in-css/