這兩個DIV爲什麼相互顯示？

Question

以下代碼將兩個DIV混合在一起，而不是一個接一個地垂直顯示它們。兩者都設置爲display: block，我想知道哪個樣式屬性會使它們表現得像這樣？見demo on jsfiddle。

<div data-role="page"> 
    <div data-role="content"> 
     <div> 
      <a href="#" data-role="button" data-inline="true" data-mini="true" style="float: left">Do something</a> 

      <span href="#" style="float: right; border-radius: 10px; background-color: white; padding: .6em">Something</span> 
     </div> 

     <div> 
      <ul data-role="listview"> 
       <li><a href="#">Foo list entry</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

Answer 1

使用，你必須包含明確元素關閉它們的浮動元素後：兩個風格，所以代碼的部分將是：

<div> 
    <a href="#" data-role="button" data-inline="true" data-mini="true" style="float: left">Do something</a> 

    <span href="#" style="float: right; border-radius: 10px; background-color: white; padding: .6em">Something</span> 

    <div style="clear:both"></div> 
</div> 

這裏是工作的jsfiddle（帶稍微修改一下保證金）：http://jsfiddle.net/Cw86p/9/