如何使div正確包含（在其邊框內）浮動元素？

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。

<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/