html - Firefox:父级感觉不到动态内容宽度

Question

Example

如果父元素的相邻元素是 float 的，那么父元素感受不到元素的宽度，如果是动态的。在 Chrome 和 Opera 中运行良好。

<div class="b-wrap">
    <div class="b-content">
        <div class="b-rect-left"></div>
        <div class="b-rect-right"></div>
        <div class="b-child-cont">джигурдаололо</div>
    </div>
</div>

.b-wrap {
    background-color: red;
    height: 50px;
   float: left;
}

.b-content {
    margin: 5px;
    overflow: hidden;
}

.b-rect-left {
    width: 40px;
    height: 40px;
   float: left;
    background-color: orange;
}

.b-rect-right {
    width: 30px;
    height: 30px;
    float: right;
    background-color: green;
}

.b-child-cont {
    overflow: hidden;
}

Answer 1

Firefox 计算包含 float 元素的宽度的方法与 Chrome 不同。我不知道为什么。

但是，似乎正在发生以下情况。

代码段中的实际内容在 b-child-cont 中，这是一个非 float 元素。 b-child-cont 决定了 b-content 的宽度，因为另外两个元素是 (b-rect-left 和 b -rect-right) 是 float 的，不影响确定内容的宽度。反过来，b-content 的宽度设置了b-wrap 的宽度，因为b-wrap 是 float 的并且占据了它的子元素。

作为设计师和开发人员，您需要为两个 float 元素留出一些空间。您可以通过多种方式做到这一点。我举两个例子。

(1)给b-child-cont添加左右边距:

.b-child-cont {
    overflow: hidden;
    background-color: yellow;
    margin-left: 40px;
    margin-right: 30px;
}

(注意:我添加了背景颜色以显示元素的延伸。)40px 和 30px 值分别基于左右方形元素的宽度。

(2) 你也可以给包含 float 的父元素指定一个with:

.b-child-cont {
    overflow: hidden;
    background-color: yellow;
    text-align: center;
}
.b-content {
    width: 30em;
} 

在这种情况下，我将 b-content 的宽度设置为 30em(您可以相应地调整它)，并且我将 b-child-cont 中的文本居中。

您发现 CSS 盒模型的计算方式存在跨浏览器差异。一旦意识到这一点，就需要围绕它进行设计，但这并不难做到。

fiddle 引用:http://jsfiddle.net/audetwebdesign/dzK73