您的位置:内蒙古11选五开奖5号的 > DIV CSS基础 > 正文

内蒙古快3综合走势图:div css float浮动

内蒙古11选五开奖5号的float认识及css float用法,内蒙古11选五开奖5号的 float浮动知识用法与float浮动教程篇

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

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

float的作用
通过内蒙古11选五开奖5号的定义float(浮动)让div样式层块,向左或向右(靠)浮动。

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

一、float语法

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

float语法:
float : none | left |right

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

 

css Float浮动结构分析图
浮动属性float值解析图

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

二、float应用与用法

Float浮动用于设置对象靠左与靠右浮动样式,可以实现我们所需要的让内蒙古11选五开奖5号的、SPAN等标签居左居右浮动。

简单使用语法

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

三、css float浮动案例

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

1、主要的html代码片段:

<div class="thinkcss"> 
<div class="thinkcss_left">布局靠左浮动</div>
<div class="thinkcss_right">布局靠右浮动</div>
<div class="clear"></div><!-- html注释:清除float产生浮动 -->
</div>

2、css代码片段:

.thinkcss{ width:400px;padding:10px;border:1px solid #F00} 
.thinkcss_left{ float:left;width:150px;border:1px solid #00F;height:50px}
.thinkcss_right{ float:right;width:150px;border:1px solid #00F;height:50px}
.clear{ clear:both}

3、效果截图

float css浮动用法应用案例截图
内蒙古11选五开奖5号的浮动float用法应用案例截图

四、内蒙古11选五开奖5号的浮动其它应用案例(休息阅读)

DIV CSS实验一
Css样式实例内容,我们让文字和图片在一个固定宽度div层内,让蓝色背景文字内容居右,小图片居左。
内蒙古11选五开奖5号的 www.phlmy.com 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">我是内蒙古11选五开奖5号的 www.phlmy.com 网站,测试内容</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浮动总结

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

相关标签: float
如需转载,请注明文章出处和来源网址:www.thinkcss.com/css/93.shtml

日期:2013-03-04 08:48:25 来源:内蒙古11选五开奖5号的 www.phlmy.com 作者:ThinkCSS
  • 其实啊也不奇怪,菜做好了先来一份尝尝味道于是提前开吃了。 2019-08-19
  • 十九大精神进机关:原原本本吃透精神 学懂弄通昂扬斗志 2019-08-13
  • 我们是建立市场经济,公有制如何建立市场经济,就要明晰产权,不明晰产权如何建立市场经济? 2019-08-13
  • 2017巴塞尔国际钟表珠宝展 2019-08-11
  • 政务舆情回应如何把握语言分寸感? 2019-08-11
  • 候选案例:机井通电惠民生 2019-08-08
  • 2018年04期 中国国家地理网 2019-08-05
  • 解析视频播控平台黑产链 20元看12家网站VIP会员视频 2019-07-31
  • 西安外国语大学第二十四届校园文化艺术节闭幕式暨第一届朗读者圆满落幕西安外国语大学第二十四届校园文化艺术节-陕西教育新闻 2019-07-31
  • 俄罗斯世界杯今日开战,送上最全观赛指南!你最看好哪支球队? 2019-07-29
  • 《人民日报》让我爱上了文学(原创首发) 2019-07-29
  • 【北京页川车型报价】北京页川4S店车型价格 2019-07-27
  • 河北沧州经济开发区管理委员会 2019-07-24
  • 强村带弱村结对共发展 2019-07-24
  • 《读药》151期:短篇小说——解读蒋一谈《庐山隐士》 2019-07-15
  • 河南11选5中奖金额表 彩票客户端 捕鱼赢话费 37118con黄大仙论坛 双色球名家最新汇总 龙江6十1开奖结果查询 2018历史开奖记录表 体育彩票超级大乐透17143 七星彩网上怎么买 新浪彩票停售 英超今天比分直播 双色球基本走势图100期开门彩 双色球机选新浪彩票 3d分析推荐 qq刮刮乐军字