我混合使用float和overflow-x:hidden。最少的代码，总是有效的。

https://jsfiddle.net/9934sc4d/4/ -加上你不需要清除你的浮动!

.left-half{
    width:200px;
    float:left;
}
.right-half{
    overflow-x:hidden;
}

div1 {
    float: right;
} 
div2 {
    float: left;
}

只要你为分隔这两个列块的元素设置clear:这就可以正常工作。

正如大家所指出的，你可以通过设置float:right;RHS含量为负，LHS为负。

然而. .如果你不使用浮点数:left;在LHS上(如Mohit所做的那样)，那么你会得到一个步进效果，因为LHS div仍然会在布局中消耗边缘空间。

然而. .LHS浮动将收缩内容，所以如果这是不可接受的，你将需要插入一个定义宽度的子节点，在这一点上，你也可以在父节点上定义宽度。

然而. .正如David指出的那样，你可以改变标记的读取顺序来避免LHS浮点要求，但这有可读性和可能的可访问性问题。

然而. .这个问题可以用浮动来解决，并提供一些额外的标记

(警告:我不赞成在那个例子中使用.clearing div，详情请看这里)

综合考虑，我想我们大多数人都希望有一个非贪婪宽度:留在CSS3中……

不幸的是，对于一般情况，这不是一个简单的问题。最简单的方法是添加一个css风格的属性“float: right;”到你的200px div，然而，这也会导致你的“main”-div实际上是全宽的，其中的任何文本都会漂浮在200px-div的边缘，这通常看起来很奇怪，这取决于内容(几乎在所有情况下，除非它是一个浮动图像)。

编辑: 正如Dom所建议的，包装问题当然可以用边缘来解决。愚蠢的我。

只要使用z指数，一切都会很好。确保将位置标记为固定或绝对。然后没有东西会像浮动标签一样移动。

这不是每个人的答案，因为它在IE7-中不受支持，但你可以使用它，然后使用IE7-的替代答案。它是display: table, display: table-row和display: table-cell。注意，这不是使用表格进行布局，而是样式化div，这样就可以很好地排列，省去上面的所有麻烦。我的是一个html5应用程序，所以它工作得很好。

本文展示了一个示例:http://www.sitepoint.com/table-based-layout-is-the-next-big-thing/

下面是你的样式表的样子:

 .container {
    display: table;
    width:100%;
 }

 .left-column {
    display: table-cell;
 }

 .right-column {
    display: table-cell;
    width: 200px;
 }