元素 float:right 后右对齐换行原因

#content{
background-color: #FFFFBA;
border: 1px solid #FFCC66; 
padding: 4px;
margin-bottom: 10px;
}
.left_right{
background-color:#FFDD99;
border:1px solid #FF9100;
padding: 0 3px;
size: 13px;
text-decoration: none;
}

<div id="content">
  <span id="blog_tips_nav" style="float:right">
    <a href="#" class="left_right">&lt;</a>
    <a href="#" class="left_right">&gt;</a>
  </span>
  小贴士: <span id="blog_tips"></span>
</div>

可以与下面的代码比较一下：

<div id="content">
小贴士: <span id="blog_tips"></span>
  <span id="blog_tips_nav" style="float:right">
    <a href="#" class="left_right">&lt;</a>
    <a href="#" class="left_right">&gt;</a>
  </span>
  </div>
注意先后顺序！
2中写法在FF中表现一致，但在IE中第2种方法会换行！！！
原因：当非float的元素和float的元素在一起的时候，如果非float元素在先，那么float的元素将被排斥 
也就是说，你的span是float:right，但是你文本还是float:none

评论

3 楼 chris_in 2011-01-20  

学了一招,谢谢分享!!!!

2 楼 wucc1986 2010-02-06  

不好意思。。没看仔细。。把span放到前面。

1 楼 wucc1986 2010-02-06  

那有办法解决吗？？