CSS float正確的問題

Question

我有這個問題...我有一段文字，然後我想有一個按鈕浮動：右，然後我有一個只是一個邊框的div ...像這樣

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
<div style="float:right;">button</div> 
<div class="dotline"></div> 

我的問題是順序去文本，虛線，然後按鈕，當它應該是文本，按鈕和虛線，我該如何解決這個問題？

這裏是爲dotline類

.dotline { 
    border-top: 1px dotted #B0B0B0; 
    height: 1px; 
    margin: 10px 0; 
} 

Answer 1

清除浮動的CSS：

.dotline { 
    border-top: 1px dotted #B0B0B0; 
    height: 1px; 
    margin: 10px 0; 
    clear : both; 
} 

http://jsfiddle.net/y5pgd/

Answer 2

您可以剪切按鈕的浮動。

您可以添加明確的：既能按鈕

或插入按鈕後，一個新的cleafix股利。

無論如何，你應該停止按鈕浮動以獲得正確的順序。