一个div没有停留在浮动的同一行：left div

Question

为什么#right与float: left div #left保持同一行？，而没有设置宽度< / em> for #right行为正常（请参阅下面的第二个代码段）。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

奇怪的是，当我没有为#right 添加任何宽度时，它就可以了。为什么为#right添加宽度设置会使一切都改变？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

注意：问题实际上在这里：为什么设置width更改包装/不包装？在this related question中，答案并不明显。

Answer 1

将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/

Answer 2

<div>是块样式元素，所以即使你向左浮动一个元素，另一个仍然是一个块并且将在它自己的行上呈现。

要使它们在同一条线上渲染，要么将显示设置为inline-block，要么浮动第二条：

* { 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>