As pointed out by @thirtydot in comment, this is a webkit bug, mor info in this question : Webkit float and display
To achieve the disired layout, you can do this :
HTML:
<p><span class="left">Some text. </span><span class="right">Some occasionally-floated text.</span></p>
CSS:
.left{
float:left;
}
.right {
clear:left;
float:left;
}
@media (min-width: 500px) {
.right {
float: right;
clear:none;
}
}