如何控制CSS中嵌套浮动元素的优先级？

Question

我的设计有两列，都是浮动div。反过来，每一个都包含一组带有标签和输入的div，也都是浮动的。

当我使用下面的简单示例缩小我的浏览器窗口时，外部块首先包裹（在Chrome和FF中），然后最终内部块包裹。虽然这在许多情况下都很好，但也有一些情况我希望内部块首先包装，以尽可能长时间地保留两个主要列的概念。

我有什么方法可以先控制哪一组div包裹？

<div style="float:left">
    <div style="clear:left;padding:1em">
        <div style="float:left;width:10em">Name 1</div>
        <input style="float:left;width:12em" />
    </div>
</div>
<div style="float:left;padding:1em">
    <div style="clear:left">
        <div style="float:left;width:10em">Name 2</div>
        <input style="float:left;width:12em" />
    </div>
</div>