html - chrome中的浮动div清除父div

Question

有一个高度可变的父 div。在这个父 div 中，还有 2 个 div 分别在左右浮动。父 div 的背景必须在两个子 div 之后结束。但在 Chrome 中并没有发生这种情况（IE 运行良好）。父 div 背景在子 div 开始之前结束。如果从子 div 中删除浮动，它会很好，但它们不会彼此相邻。

Answer 1

尝试overflow: auto在父 div 上设置。

问题是它们的父级不包含浮点数，除非它们的父级建立一个新的块格式化上下文。overflow: auto 就是这样做的，就像其他一些事情一样（包括浮动 - 即浮动父框并且包含子浮动）。

然而，建立一个新的块格式化上下文并不是实现你想要的，大多数人甚至不这样做。

这就是你的权利？

HTML

<div class="out">
    <div class="left"></div>
    <div class="right"></div>
</div>

CSS

.left {
    float: left;
}

.right {
    float: right;
}

如果在浮动下方插入一个新元素（让我们给它一个 cleardiv 类）并对其应用clear: both，它，同一个元素，将被推到它上面的所有浮动元素下方。而且由于它本身不是浮动元素，因此如您所料，它将包含在父元素中。
所以，如果它被父元素包含，并且被推到它的底部，那么父元素将不得不一直“拉伸”到底部——就像你想要的那样。

这是新的 HTML

<div class="out">
    <div class="left"></div>
    <div class="right"></div>
    <div class="cleardiv"></div>
</div>

CSS

.left {
    float: left;
}

.right {
    float: right;
}

.cleardiv {
    clear: both;
}