Question

我需要在已经向下推动的浮动元素周围显示文本。 HTML / CSS非常简单：

<div id="container">
    <div id="shim"></div>
    <div id="myimg"></div> 
    <p>This is a test to demonstrate the float overwriting issue. The blue box represent an image that I don't wish the text to overwrite...</p>
</div>

CSS：

#container {
    width: 200px;
}

#shim {
    float:right;
    width: 1px;
    height: 40px;
    background-color: red;
}

#myimg {
    clear:both;
    float:right;
    width: 100px;
    height: 40px;
    background-color: blue;
}

它在Chrome和Firefox中完美运行，但在Safari中，文本会覆盖我的浮动元素。

我已经创建了一个小提示来演示这个bug（显然，你需要safari才能看到它）：

http://jsfiddle.net/8JLFp/

任何人都可以找到解决方案或提出另一种方法吗？

Answer 1

Please check the same issue on this site. May be this helps you.

可能的解决方案。

尝试添加clear：both divs
使用overflow：hidden

如何解决这个Safari浮点渲染错误

1 个答案: