当前位置:晓网 > 网站建设运营 > 教程 > css教程 >

css float浮动用法(left right)

上一篇:css sprites图像拼合 下一篇:css margin外边距外间距 返回目录

  Css样式的float浮动属性,用于设置标签对象(如:<div>标签盒子、<span>标签、<a>标签、<em>标签等html标签)的浮动布局,浮动也就是我们所说标签对象浮动居左靠左(float:left)和浮动居右靠右(float:right)。
 
  float是什么意思?
 
  float是浮动,翻译成中文也是浮动意思。
 
  float的作用
 
  通过css定义float(浮动)让div样式层块,向左或向右(靠)浮动。
 
  一、float语法
 
  Float常跟属性值left、right、none
 
  Float:none 不使用浮动
 
  Float:left 靠左浮动
 
  Float:right 靠右浮动
 
  float语法:
 
  float : none | left |right
 
  参数值:
 
  none :  对象不浮动
 
  left :  对象浮在左边
 
  right :  对象浮在右边
 
  float浮动结构分析图
 
  Float浮动结构分析图
 
  接下来我们来通过一个div+css实例讲解float使用技巧。
 
  二、float应用与用法
 
  Float浮动用于设置对象靠左与靠右浮动样式,可以实现我们所需要的让DIV、SPAN等标签居左居右浮动。
 
  简单使用语法
 
  div{float:left} /* css注释:设置div对象浮动靠左(left) */
 
  div{float:right} /* css注释:设置div对象浮动靠右(right) */
 
  三、css float浮动案例
 
  我们设置一个盒子里,一个靠右、一个靠左浮动2个盒子,为了直观看到css浮动布局效果,我们对两个盒子设置一定宽度、高度和边框。
 
  1、主要的html代码片段:
 
  <div class="webxiao">
 
  <div class="webxiao_left">布局靠左浮动</div>
 
  <div class="webxiao_right">布局靠右浮动</div>
 
  <div class="clear"></div><!-- html注释:清除float产生浮动 -->
 
  </div>
 
  2、css代码片段:
 
  .webxiao{ width:400px;padding:10px;border:1px solid #F00}
 
  .webxiao_left{ float:left;width:150px;border:1px solid #00F;height:50px}
 
  .webxiao_right{ float:right;width:150px;border:1px solid #00F;height:50px}
 
  .clear{ clear:both}
 
  四、css浮动总结
 
  我们要区别与文字内容靠左( text-align:left)靠右( text-align:right)样式,浮动只针对html标签设置靠左靠右浮动样式。float浮动样式没有靠中(浮动居中)的样式,如果需要让标签对象居中我们在css布局居中相关文字给大家详细讲解介绍(css margin)。这里记住浮动靠右使用float:right,浮动靠左使用float:left样式即可。

本文版权归原作者所有,转载请注明原文来源出处,晓网感谢您的支持!

本文链接:http://www.jrfjwh.cn/web/css/20160128-3489.html

晓网客服

关注微信,随时获得互联网动态

晓网微信
时时彩最快开奖 好运彩彩票app下载安装 江苏十一选五今天的 湖北快3基本走势一定牛 极速赛车平台 排列三5码全组遗漏 青海快三玩法技巧 股票融资杠杆 湖南亲友汇麻将下载 青海十一选五今日预测杀码号 五分彩定位胆玩法介绍 微乐麻将赢牌技巧 幸运飞艇是正规的吗 注册送彩金捕鱼 山西扣点点麻将安卓版下载 秒速牛牛漏洞 幸运农场计划稳定版