CSS嵌套浮动和清除表现不一致
请参阅此jsFiddle示例以供参考。
我们大多数人都相当熟悉一种简单的技术来获得CSS Colunms（2 div div side-by site），它涉及浮动和使用margin和width:auto推动另一个width:auto然后是许多清除技术之一。 （Exibit A @ jsFiddle Reference） 。
这项技术工作得很好，并与我熟悉的所有形式的清算工作很好：
clear: both div在容器底部 overflow: hidden对容器overflow: hidden 然而，当你知道左元素的宽度并且想要正确的元素填充其余的容器时，这个简单的实现就很有效。
这种技术也可以很好地反过来（ float: right和margin-right ），但必须首先在容器中放置浮动的（右）元素才能正确呈现IE。 （Exibit B @ jsFiddle参考）
但是，当我们处理嵌套清除时，我发现了一个问题。 （也就是在其中一个柱子内部清除）。
一旦我将清除容器放入未浮动的柱（Exibit C＆D）中，我注意到WebKit和Gecko浏览器中有一些奇怪的行为。 清除元素被外浮标捕获并清除其父母的浮标。
主浮动位于左侧时不会发生这种情况。 （Exibit E）
有没有办法解决这个问题，如果可能的话，我想继续使用float: right ，如果可能的话，这看起来有点奇怪，一个可以工作，另一个不可以。
另外，奇怪的是，这在IE9中不是问题，（但在IE 6-8中）。
作为参考，这是在Windows 7 64bit上由Chrome 17.0.963.46呈现的jsFiddle的输出：
有任何想法吗？
编辑 ：我应该注意，用overflow: hidden封装内部浮动似乎工作，但它有它自己的复杂性（例如，它基本上与相对/绝对定位组件，DHTML Dropdowns等打破任何东西，并不总是一个可能的解决方案。
我可能会在这里错过重要的东西......但这是否工作？
http://jsfiddle.net/mikecruz/8Hnjg/
链接地址: http://www.djcxy.com/p/88413.html