CSS--float实现浮动

       以前接触过那么一点CSS，对于浮动还是非常不了解的，不过通过这次做订餐大师了解了加上别人的一些讲解与分享，知道了：

一、以前都是把图像浮动，如下，把图像浮动在右侧：

img{
       float:right;
}

 二、其实我们也可以设置文字的浮动：

      1、float的属性：

                               left---元素向左浮动;

                               right---元素向右浮动;

                               none---元素不浮动;

                               left---继承父元素的浮动属性;  

如下：设置名字跟价格左浮动，餐厅和套餐右浮动;

<style>
    .txt1{
    float: left;
}
.txt2{
    float: right;
}
.txt3{
    float: left;
}
</style>

<div class="txt1">张三</div>
<div class="txt2">￥11.50</div>
<div class="txt3">7-11  半荤半素</div>

      2、上述情况，出现了一个问题，餐厅是跟在名字后面的，那么要餐厅在下一行，就要用到clear啦：

<style>
    .txt3{
            clear:both;
     }
</style>

     3、还有一种情况就是，当他txt1与txt3都向左浮动时，会出现覆盖的现象，这是就要用overflow属性去重了：

<style>
.txt3{
     overflow:hidden;     //设置其内容不可见
}
</style>