IE7 在同一元素上浮动和清除答案

【问题标题】：IE7 float and clear on the same elementIE7 在同一元素上浮动和清除
【发布时间】：2011-01-28 21:25:07
【问题描述】：

这是我的代码，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>[your title]</title>
    <style type="text/css">
    .a, .b, .c
    {
        float: left;
    }
    .b
    {
        clear: left;
    }
    </style>
</head>
<body>
<div class="a">1</div>
<div class="b">2</div>
<div class="c">3</div>
</body>
</html>

在 IE8、firefox、chrome、safari、opera 中，输出为：

1
23

但是在 IE7 中：

13
2

我已经搜索了两天的解决方案...有人可以帮忙吗？

干杯， b长颈鹿

【问题讨论】：

标签： css internet-explorer css-float

【解决方案1】：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>[your title]</title>
    <style type="text/css">
    .a, .b, .c
    {
        float: left;
    }
    .b
    {
        clear: left;
    }
    </style>
</head>
<body>
<div class="a">1</div>
<div style="clear: left;"></div>
<div class="b">2</div>
<div class="c">3</div>
</body>

【讨论】：

感谢回答 Durilai，但有没有办法在 css 中做到这一点？我想在没有源标记的情况下这样做:)

【解决方案2】：

这应该可以解决它

.a, .b, .c { float: left; }
.b { clear: both; }

【讨论】：

为什么和他的有什么不同呢？他没有右边的花车，很清楚：左边会做。

【解决方案3】：

或者您可以使用 clearfix 技术。

http://www.positioniseverything.net/easyclearing.html

【讨论】：

这是为了将容器的底部边缘向下推以完全包含其浮动的孩子，这完全是一个不同的问题。