12.float和绝对定位的区别（当旁边有文本盒子float后无法显示问题）

float和绝对定位的区别：

 

  CSS中脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

　　需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。
　　而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

  

     其中线条为中间到两端渐变用背景图片添加

    <ul class="nav">

        <li><a href="#">医院首页</a><i></i></li>

        <li><a href="#">专家咨询</a><i></i></li>

        <li><a href="#">在线咨询</a><i></i></li>

        <li><a href="#">来院路线</a></li>

    </ul>

 

　　

.nav{

    width:6.4rem;

    height:0.66rem;

    background:#bd2b58;

}

.nav li{

    float:left;

    width:1.59rem;

    height:0.66rem;

    position:relative;

}

.nav li a{

    display:block;

    float:left;

    width:1.58rem;

    height:0.66rem;

    line-height:0.66rem;

    text-align:center;

    font-size:0.27rem;

    color:#fff;

}

.nav li i{

    display: block;

    /*float: right;*/当用float时候 背景会被字占据位置不会显示           

    width: 0.02rem;

    height: 0.66rem;

    background: url("../images/i.png");

    background-size: 100% 100%;

    background-position: 0 0;

    position: absolute;                 /*改用绝对定位文本盒子无视他*/

    right: 0px;

}