html - 为什么这两个 DIV 相互重叠显示？

Question

下面的代码将两个 DIV 混合在一起，而不是一个接一个地垂直显示它们。两者都设置为display: block，我想知道哪个样式属性使它们表现得像这样？！请参阅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

使用浮动元素后，您必须使用包含clear:both样式的元素关闭它们，因此部分代码将是：

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