CSS - 图像上的不同边距取决于文本量

Question

我有一个容器div（显示为蓝线），它有一个设置的宽度和一个可变的高度，具体取决于里面的内容。 div可以包含文本和图像。文本始终向左浮动，图像始终向右浮动。除了左侧（靠近文本），图像的每边边距为2px。

如果文本不适合图像旁边，我希望它包裹图像，但也有10px的边距。这是否可行，这样当文字不够长时，边距在图像底部保持2px？

Answer 1

这是默认行为，因为浮动正从正常流中移除。默认情况下，浮动图像（及其边距）将溢出包含段落。

演示于：http://jsfiddle.net/m937Q/

我测试过的css：

p {
    width: 300px;
    background-color: wheat;
}
p img {
    float: right;
    margin-bottom: 10px;
}

注意：

如果你的div有一个新的block formatting context（如果它浮动或溢出会发生：隐藏;除其他外）它将包含它的浮点数和边距：http://jsfiddle.net/m937Q/2/