Question

我有一个非常简单的CSS示例，详述如下。 .entry类生成一个带有1px黑色边框的简单框。下面的例子，将在框内呈现“123”，在框外呈现“abc”和“xyz”，因为这些元素用左右浮动标记。我的目标是让.box1里面.entry对齐左边，.box2里面.entry对齐吧。

<html>
<head>
<style type="text/css">
        .entry 
    {
        width: 400px;
        border-style: solid;
        border-width: 1px;
        border-color: #000;
    }   
    .box1
    {
        width: 75px;
                float: left;
    }

    .box2
    {
        width: 300px;
                float: right;   
    }
</style>
</head>
<body>
        <div class="entry">
            123
            <div class="box1">abc</div>
            <div class="box2">xyz</div>
        </div>
</body>
</html>

它在IE中渲染得很好但不是firefox

Answer 1

由于浮子被从正常流中取出，它们周围的盒子会坍塌。

我首先要解释它为什么在IE中工作。您已通过在每个元素上设置宽度或高度来为其“布局”。在这种情况下，它是width。有关详细信息，请参阅hasLayout。这非常方便，因为它还可以解决您遇到的大多数其他IE错误。

神奇的子弹是：

height: 1%; /* or any other value. IE6 wrongly sees height as min-height. */

或者如果您无法设置特定尺寸，请使用

zoom: 1; /* A IE only property. Doesn't validate, but doesn't cause any harm either */

因此，对于您的问题，使其在适当的浏览器中工作，有几个解决方案。如果您将浮动元素的父级设置为float，则该框将围绕子浮动延伸。虽然这可能会给DOM带来麻烦，但我不知道你的其他标记是怎么回事。

然后，更简单的方法是设置overflow:hidden;并修复它。但是现在你必须注意长网址，代码片段或其他任何可能意外推出div的内容。如果你自己做整个网站，这通常不是一个大问题，如果你把它交给某人在CMS中使用，可能会略大一些。如果你无法在你的布局周围解决无数的花车，那么仍然值得承担风险。

在末尾添加元素以清除浮动也是一种方法，但我发现以前的方法更容易。

我最好停止喋喋不休，你可能想看看代码：


.entry {
  width: 400px;
  border: 1px solid #000;
  float: left;      /* Option 1 */
  overflow: hidden; /* Option 2 */
}   
.box1 {
  width: 75px;
  float: left;
 }
.box2 {
  width: 300px;
  float: right;   
 }

Answer 2

由于您没有Doctype，因此您正在触发Quirks mode。这使得浏览器比标准（AKA严格）模式更加错误。 Internet Explorer是这里最糟糕的攻击者。

我怀疑你的问题是你希望.entry的边框扩展到.box1和.box2。有关更多详细信息，请参阅containing floats;有关更好的解决方案，请参阅Methods for Containing Floats ..

当然，您的问题可能会有所不同。 You were rather vague

Answer 3

您需要清除FF的浮动：

.entry:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

我也会为IE做这件事：

.entry { min-height: 10px;}

否则，我不明白为什么它不起作用......

Answer 4

试试这个;我测试了它，它适用于FF 3，Safari 3.2，Opera 9.6和IE 7。

（我在.box2 div中添加了额外的文本行的原因是为了确保.entry div在添加额外内容时会垂直伸展。）

<html>
<head>
<style type="text/css">
    .entry 
    {
        width: 400px;
        border-style: solid;
        border-width: 1px;
        border-color: #000;
    }   
    .box1
    {
        width: 75px;
        float: left;
    }

    .box2
    {
        width: 300px;
        float; left;
        margin: 0 0 0 75px;
    }

    .entry span
    {
        width: 400px;
        float: left;
    }
</style>
</head>
<body>
        <div class="entry">
            <span>123</span>
            <div class="box1">abc</div>
            <div class="box2">xyz<br>More text</div>
        </div>
</body>
</html>

Answer 5

尝试将overflow：hidden（或auto）添加到.entry {...}

css浮动故障排除

5 个答案: