优酷模仿之float:right

float:right后,前面内容出现换行
    <style>
        .p1{
             194px;
            height: 44px;
            background-color: red;
            font-size: 14px;
        }
        .s1{
            float: right;
        }
    </style>
</head>
<body>
    <p class="p1">女婴父母疑被重金封口<span class="s1">2.7万</span><span class="s2">smgbb新闻</span></p>
</body>

模仿优酷网站的时候,发现一个问题,span元素向右浮动,浮动元素前的文本节点元素会发生换行,经测试,只有chrome会有这种现象,ie和Firefox都正常。
想不通原因,希望后续能想明白。但是通过加上一个左浮动能解决这个问题。处理方案如下:

<p class="p1"><span style='float:left;'>女婴父母疑被重金封口</span><span class="s1">2.7万</span><span class="s2">smgbb新闻</span></p>
原文地址:https://www.cnblogs.com/wjx91/p/5596989.html