• 中办印发《关于进一步激励广大干部新时代新担当新作为的意见》 2019-09-07
  • 一条塔里木河 串起南疆各色景致与无限风光 2019-09-07
  • 【互动话题】我为两会建言献策 2019-07-18
  • 还是中国足球队最牛,因为他稳定;中国股市就不一样了,怎么形容呢?唉,还不如中国足球! 2019-07-18
  • 新生代农民工市民化与城镇化发展 2019-07-04
  • 习近平应约同俄罗斯总统普京通电话 2019-07-02
  • 中粮集团混改再按“快进键” 2019-07-02
  • 人的本质,要能反映出人与动物的本质不同。过去有个网友说“劳动是人的本质”;真理先生现说是“财富占有”!???,能解释一下么? 2019-06-30
  • [鄙视]又一个“风水帖”。深坛什么时候成了“算命平台”了?!这些伪公知砖家不深入农村了解农民,凭一点表象就信口开河,“辛苦劳作的农民没有富起来”是这“4点原因” 2019-06-22
  • 击鼓-热门标签-华商生活 2019-06-22
  • 河北定州:秸秆回收变废为宝 2019-05-14
  • 妹妹半个多世纪前嫁到安徽 八旬老人想再见她一面 2019-05-14
  • 在这里,读懂2017——人民日报十大评论文章 2019-05-14
  • 步飘恒的专栏作者中国国家地理网 2019-05-14
  • 【奋斗者说】银河麒麟孔金珠:核心技术只有靠自己干出来 2019-05-13
  • ?
    欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
    您的位置:时时彩走势图后一 > DIV+CSS基础 >

    CSS基础必学列表

    div css float浮动用法(left right)

    时时彩走势图后一 www.cuhw.com.cn 时时彩走势图后一float认识及css float用法,时时彩走势图后一 float浮动知识用法与float浮动教程篇

    Css样式的float浮动属性,用于设置标签对象(如:<div>标签盒子、<span>标签、<a>标签、<em>标签html标签)的浮动布局,浮动也就是我们所说标签对象浮动居左靠左(float:left)和浮动居右靠右(float:right)。

    float是什么意思?
    float是浮动,翻译成中文也是浮动意思。进入对应css手册中float手册了解float基本信息。

    float的作用
    通过时时彩走势图后一定义float(浮动)让div样式层块,向左或向右(靠)浮动。

    float浮动教程目录
    1. float语法
    2. float应用与用法
    3. float浮动案例
    4. css浮动其他应用
    5. css浮动总结

    一、float语法   -   TOP

    Float常跟属性值left、right、none
    Float:none 不使用浮动
    Float:left 靠左浮动
    Float:right 靠右浮动

    float语法:
    float : none | left |right

    参数值:
    none :  对象不浮动
    left :  对象浮在左边
    right :  对象浮在右边

    float浮动结构分析图
    Float浮动结构分析图

    接下来我们来通过一个div+css实例讲解float使用技巧。

    二、float应用与用法   -   TOP

    Float浮动用于设置对象靠左与靠右浮动样式,可以实现我们所需要的让时时彩走势图后一、SPAN等标签居左居右浮动。

    简单使用语法

    1. div{float:left} /* css注释:设置div对象浮动靠左(left) */ 
    2. div{float:right} /* css注释:设置div对象浮动靠右(right) */ 

    三、css float浮动案例   -   TOP

    我们设置一个盒子里,一个靠右、一个靠左浮动2个盒子,为了直观看到css浮动布局效果,我们对两个盒子设置一定宽度、高度和边框。

    1、主要的html代码片段:

    1. <div class="divcss5"> 
    2.     <div class="divcss5_left">布局靠左浮动</div> 
    3.     <div class="divcss5_right">布局靠右浮动</div> 
    4.     <div class="clear"></div><!-- html注释:清除float产生浮动 --> 
    5. </div> 

    2、css代码片段:

    1. .divcss5{ width:400px;padding:10px;border:1px solid #F00} 
    2. .divcss5_left{ float:left;width:150px;border:1px solid #00F;height:50px} 
    3. .divcss5_right{ float:right;width:150px;border:1px solid #00F;height:50px} 
    4. .clear{ clear:both} 

    3、效果截图

    float css浮动用法应用案例截图
    时时彩走势图后一浮动float用法应用案例截图

    四、时时彩走势图后一浮动其它应用案例(休息阅读)   -   TOP

    DIV CSS实验一
    Css样式实例内容,我们让文字和图片在一个固定宽度div层内,让蓝色背景文字内容居右,小图片居左。
    时时彩走势图后一 www.cuhw.com.cn CSS案例演示最终效果图如下
    float实例示意图

    1、首先我们设置一个最外层的宽度为300px,高度为200px的css命名为box的css选择器代码如下(知识点px是什么意思)
    .box{width:300px; height:200px;}

    2、设置box内的文字内容部分css样式命名为yangshi,并设置背景为蓝色,宽度为120px,居右浮动
    .yangshi{ width:120px; float:right; background:#0066FF;}

    3、设置图片居左浮动div+css样式
    img { float: left;}

    4、body内的div布局,代码如下

     <div class="box">
    <div class="yangshi">我是时时彩走势图后一 www.cuhw.com.cn 网站,测试内容</div>
    <img src="demo.gif" />
    </div>

    说明:这里img标签是链接外部图片,图片名为demo.gif

    最终演示结果截图
    css float实例

    CSS实验二
    接下来我们演示使用div+css让这里小图片居右(上个例子是居左),蓝色背景文字内容区居左(上个例子是居右)(扩展css 居中)。这里我们只需要改变yangshi的float:right;为float:left和图片css样式img { float: left;}为img { float: right;}
    CSS代码如下:

     .box{width:300px; height:200px;}
    .yangshi{ width:120px; float:right; background:#0066FF;}
    img{ float:left;}

    html中的css代码和内容不变
    最终演示结果截图如下:
     

    div+css中fllat实例展示图

    希望通过以上两个css实例对你认识float有帮助。希望大家多少实际操作实践试试!扩展阅读:CSS清除浮动

    五、css浮动总结   -   TOP

    我们要区别与文字内容靠左( text-align:left)靠右( text-align:right)样式,浮动只针对html标签设置靠左靠右浮动样式。float浮动样式没有靠中(浮动居中)的样式,如果需要让标签对象居中我们在css布局居中相关文字给大家详细讲解介绍(css margin)。这里记住浮动靠右使用float:right,浮动靠左使用float:left样式即可。

    如需转载,请注明文章出处和来源网址://www.cuhw.com.cn/rumen/r93.shtml

    我要分享到:
    上一篇:div与span区别及用法
    下一篇:DIV CSS 缩写

    必备CSS教程 Essential CSS Tutorials

    必备HTML基础教程 Essential HTML Tutorials

     

    如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
    时时彩走势图后一文章修订日期:2013-03-04 08:48 原创:时时彩走势图后一
    本文时时彩走势图后一 www.cuhw.com.cn DIVCSS5版权所有。

  • 中办印发《关于进一步激励广大干部新时代新担当新作为的意见》 2019-09-07
  • 一条塔里木河 串起南疆各色景致与无限风光 2019-09-07
  • 【互动话题】我为两会建言献策 2019-07-18
  • 还是中国足球队最牛,因为他稳定;中国股市就不一样了,怎么形容呢?唉,还不如中国足球! 2019-07-18
  • 新生代农民工市民化与城镇化发展 2019-07-04
  • 习近平应约同俄罗斯总统普京通电话 2019-07-02
  • 中粮集团混改再按“快进键” 2019-07-02
  • 人的本质,要能反映出人与动物的本质不同。过去有个网友说“劳动是人的本质”;真理先生现说是“财富占有”!???,能解释一下么? 2019-06-30
  • [鄙视]又一个“风水帖”。深坛什么时候成了“算命平台”了?!这些伪公知砖家不深入农村了解农民,凭一点表象就信口开河,“辛苦劳作的农民没有富起来”是这“4点原因” 2019-06-22
  • 击鼓-热门标签-华商生活 2019-06-22
  • 河北定州:秸秆回收变废为宝 2019-05-14
  • 妹妹半个多世纪前嫁到安徽 八旬老人想再见她一面 2019-05-14
  • 在这里,读懂2017——人民日报十大评论文章 2019-05-14
  • 步飘恒的专栏作者中国国家地理网 2019-05-14
  • 【奋斗者说】银河麒麟孔金珠:核心技术只有靠自己干出来 2019-05-13