왜이 두 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/