Question

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

Answer 1

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

问题是他们的父母不包含花车，除非他们的父母建立新的花格格式化背景。 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;
}

chrome中的Floating Div清除父div

1 个答案: