为什么CSS浮动离开不能将两个div放在同一行？

Question

我想用CSS在同一行上制作两个div.

body {
  margin: 0px;
  padding: 0px;
}
div {
  border: 1px solid black;
  font-size: 30px;
}
#wrapper {
  width: 900px;
  margin: 0px auto;
}
#header {
  width: 100%;
  height: 100px;
  background: red;
}
#main {
  width: 100%;
  height: 100px;
  background: blue;
}
#login_left {
  width: 50%;
  height: 100px;
  background: blue;
  float: left;
}
#login_right {
  width: 50%;
  height: 100px;
  background: yellow;
  float: left;
}
#footer {
  width: 100%;
  height: 50px;
  background: white;
}

<div id="wrapper">
  <div id="header">this is the top
  </div>
  <div id="main">
    <div id="login_left">login_left
    </div>
    <div id="login_right">login_right
    </div>
  </div>
  <div id="footer">this is the footer
  </div>
</div>

login_left和login_right都设置为float:左边的css和宽度是50%,为什么不能将两个login_left和login_right放在同一行？

我在Firefox中获得的css是以下内容.

1. 为什么蓝色div满900 px？
2. 为什么黄色div没有设置在右边？

Answer 1

1. 你使用边框,所以div是50%+ 2px(以修复使用box-sizing: border-box;)
2. login_left是50%(+ 2px)宽,所有行都是蓝色的事实是因为#main有蓝色背景