如何防止带有浮动子项的浮动父项在 IE6 中扩展到 100% 宽度？答案

【问题标题】：How to prevent floated parent with floated children from being expanded to 100% width in IE6?如何防止带有浮动子项的浮动父项在 IE6 中扩展到 100% 宽度？
【发布时间】：2011-11-02 07:53:50
【问题描述】：

我有一个带有 2 行左浮动子块的左浮动 div。每一行都用一个简单的清除块清除。

问题是 IE6 将父块的宽度扩展到可用空间的 100%，而在其他浏览器中，父块的宽度设置为完全包裹子块。

当所有子块都浮动时，宽度在 IE6 中是正确的。但是我需要将子块排列成行，所以我在每行之后放置了一个额外的清除块。在该父级的宽度扩展到 100% 之后。

在 IE6 中有正常父块宽度的解决方法吗？（不欢迎桌子）

Have a look at the image illustrating the problem

<!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" lang="en" xml:lang="en">
<head>
    <style type='text/css'>
        #parent {
            float: left;
            background-color: black;
        }

        .block {
            width: 30px;
            height: 30px;
            background-color: yellow;
            margin: 10px;     
            float: left;
        }

        .clear {
            height: 1px;
            clear: both;
            font-size: 1px;
            line-height: 0px;
        }
    </style>
</head>

<body>
    <div id="parent">
        <div class="block">1</div>
        <div class="block">2</div>
        <div class="block">3</div>
        <div class="block">4</div>

        <div class="clear"></div>

        <div class="block">5</div>
        <div class="block">6</div>
        <div class="block">7</div>
        <div class="block">8</div>

        <div class="clear"></div>
    </div>
</body>

【问题讨论】：

标签： css internet-explorer-6 css-float

【解决方案1】：

我无法访问 IE6，所以我实际上无法检查这个。但您可以尝试以下方法：

http://jsfiddle.net/YA7CN/

（将积木放入容器中，使用 clear:both）

正如我所说，它可能会给你同样的问题......但它是一个选项。顺便问一下，您是为使用 ie6 的特定公众设计的吗？如果不是这样，我不会太担心它看起来不同的东西，你会发疯的把所有东西都改编成一个会崩溃的版本！

【讨论】：