我怎样才能实现一个带浮动的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/