內部有浮動div的div，不適合內容

Question

<div style="background-color:black"> 
    <div style="float:right"> 
     Test message 
    </div> 
<div> 

由於父div不符合內容，因此會顯示帶白色背景的「測試消息」。

如何讓div適合內容？ （不使用表或顯示：表因爲它不是在IE支持）

Answer 1

你也可以這樣做：

<div style="background-color:black; overflow: auto;"> 
    <div style="float:right"> 
     Test message 
    </div> 
<div> 

這是做clearfix :)

一個更清潔的方式

Answer 2

一個常見的解決方案是將一個後<br style="clear: both;">浮動元件以清除浮體和使所述父元素包裹元件。

<div style="background-color:black"> 
    <div style="float:right"> 
     Test message 
    </div> 
    <br style="clear: both;"> 
<div> 

除了這個問題，我建議把樣式放在一個單獨的CSS文件中，如果還沒有實現的話。

Answer 3

聽起來像這樣是舊的clearfix問題。當使用CSS和浮點佈局時，這幾乎是完全必要的。請參閱http://www.webtoolkit.info/css-clearfix.html以獲得簡要說明和修復。或爲更深入瞭解，看到這裏http://www.positioniseverything.net/easyclearing.html