以前接触过那么一点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>