html - div叠加在其他div上

Question

我有一个带有div标签的简单html代码

<div class="left">Proj Name：</div> 
<div class="right">must have a name</div>
<div >Shouldn't this be on a new line?</div>

类在样式表中定义为

.left {
  float: left;
  width: 125px;
  text-align: right;
  margin: 2px 10px;
  display: inline
}
.right {
  float: left;
  text-align: left;
  margin: 2px 10px;
  display: inline
}

我遇到的问题是，似乎有一个 super 拼版，只要涉及对齐元素，后面的任何 div 标签都会忽略前面标签的存在。请看http://jsfiddle.net/tea0phnr/2/对于我所说的。

Answer 1

CSS

.clear {clear:both;}

HTML

<div class="left">Proj Name：</div>
<div class="right">must have a name</div>
<div class="clear"></div>
<div >Shouldn't this be on a new line?</div>

http://jsfiddle.net/tea0phnr/3/