当他们的父母是位置时，IE7浮动消失了：相对

Question

这是我在IE7面临的问题的简化版本。在所有其他（较新的）浏览器中，这显示正常...为什么position:relative;会对float: right;或float: left;产生影响？有没有办法保留position: relative而不牺牲float的功能？

JS小提琴：http://jsfiddle.net/uW7JV/2/

没有position: relative;

使用position: relative;（在红色框中）

更精简的版本：http://jsfiddle.net/uW7JV/4/

有趣......删除<div class="clearboth"></div>可以显示内容。但是，我确实需要那些功能，所以我仍然在寻找修复方法。 http://jsfiddle.net/uW7JV/9/

Answer 1

您需要将overflow: hidden添加到.column-wrapper，以便它包装其浮动子项。完成后，您根本不需要.clearboth div和CSS。

您需要解决的另一个问题是列宽，因为IE7不支持box-sizing: border-box，因此在分配width时需要考虑填充。

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%;
}

DEMO：http://jsfiddle.net/myajouri/uW7JV/15/

另一种方法是使用Clearfix hack

.clearfix {
  zoom: 1; /* for IE6/7 */
}

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

然后将clearfix课程添加到.column-wrapper。