Css 当其父项为位置：相对时，IE7浮动消失

这是我在IE7中面临的问题的简化版本。在所有其他（较新的）浏览器中，这将显示良好的。。。为什么

位置：相对对<代码>浮动有影响：右或<代码>浮动：左侧？有没有一种方法可以在不牺牲浮动功能的情况下保持相对位置

JS小提琴：

无
位置：相对

带
位置：相对（在红色框上）

更精简的版本：

有趣的。。。删除
可显示内容。但是，我确实需要这个功能，所以我仍然在寻找修复方法
 您需要将
溢出：隐藏
添加到
列包装器
，以便它包装其浮动子项。完成此操作后，您根本不需要
.clear
div和CSS

您需要解决的另一个问题是列宽，因为IE7不支持
框大小：边框框
，所以在分配
宽度
时需要考虑填充

div {
    padding: 5px 1%;
}
.column-wrapper {
    background: orange;
    position: relative;
    overflow: hidden;
}

.main {
    background: yellow;
    float: right;
    width: 64.6%;
}
.sidebar {
    float: left;
    background: green;
    width: 31.3%;
}

演示：

另一种方法是使用

然后将
clearfix
类添加到
.column wrapper
您真的需要相对：位置吗？由于IE7的行为更像IE6（我认为这是最糟糕的一个），我想您应该将浮动标记也设置在相对位置。位置：relative在屏幕上进行回流/刷新，因此父对象被重新绘制，而不是子对象，因为它们实际上不在流中。。。漂浮。（希望你理解我的意思）在这个例子中，它是不相关的，但我需要它的网站，我正在创建。在这个父级中不仅仅有浮动的元素。好的，继续在IE7或IE6标准模式下进行相对定位，看看我所说的屏幕回流是什么意思。如果您习惯于为IE6/7编写代码，您可能会记得一些内容可能会与hasloyout相冲突，或者不记得relative是在屏幕上绘制元素的解决方法。你正在处理著名的haslayout：）是的，我知道盒子大小的问题。那只是为了演示<代码>溢出：隐藏
并不理想，因为我需要将东西“悬垂”在浮动列上。在这种情况下，请使用
zoom:1
在
上触发
hasLayout
。列包装器
。我建议使用Clearfix黑客。我会更新我的答案。叹气。为什么我没有想到缩放：1
。。。就像IE 101一样。我保持了代码的原样，只是用
position:relative将其添加到div中。魔术非常感谢。
.clearfix {
  zoom: 1; /* for IE6/7 */
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}