Question

为什么div不能正确包含浮动元素（指定float属性left或right）

<div style="border: 1px solid black;">
    <button style="float: right; padding: 10px;">this is button</button>
</div>

如何让div正确包含（在其边框内）这个浮动元素？

Answer 1

您应该在div上使用overflow: auto，它会根据内容扩展div。

<div style="border: 1px solid black; overflow: auto">
    <button style="float: right; padding: 10px;">this is button</button>
</div>

http://jsfiddle.net/jMshh/

这是一个教程，详细解释了溢出的工作原理： http://css-tricks.com/the-css-overflow-property/

Answer 2

您需要清除浮子，否则容器会折叠到零高度。有很多方法可以做到这一点。这是一个例子：

<div style="border: 1px solid black;">
    <button style="float: right; padding: 10px;">this is button</button>

    <div class="clearfix"></div>
</div>

.clearfix {
    clear: both;
}

Answer 3

使用： - <div style="clear: both;"></div>

<div style="border: 1px solid black;">
    <button style="float: right; padding: 10px;">this is button</button>
    <div style="clear: both;"></div>
</div>

Answer 4

将overflow: hidden用于父div。

Answer 5

使用明确修复

.clear:after, .clear:before {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
}
.clear:after {
    clear: both;
}

http://jsfiddle.net/jMshh/

如何使div正确包含（其边界内）浮动元素？

5 个答案: