我怎樣才能實現一個帶浮動的div的餘裕：是吧？

Question

http://jsfiddle.net/hga7Lxt8/1/

float: right; 
margin-left: 10px; 

沒有緣至橙紅色框（行的頂部邊框達到一直到它）的左側，即使它有這樣的樣式屬性。哪裏不對？

Answer 1

你可以看到真正的問題，當你apply a semi-transparent background-color。

你需要明白的是，內容彩車周圍浮動元素，不含盒（除非他們還漂浮或有顯示屬性設置爲block其他東西）。

您在您的.row設置margin-right: 110px;修復：

http://jsfiddle.net/hga7Lxt8/4/

你想要什麼，實現只能是faked又不會「工作」，如果你的浮動元素有任何透明（或箱陰影）。

Answer 2

行元素繼續在橙色框後面。嘗試：

.right { 
    float: right; 
    width: 100px; 
    height: 100px; 
    background: orangered; 
} 
.row { 
    border-top: 1px solid;  
    overflow: auto; 
    margin-right: 110px; 
} 

http://jsfiddle.net/thrb5936/