CSS中float如何使用
这篇文章将为大家详细讲解有关CSS中float如何使用,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
成都创新互联专注于萍乡企业网站建设,成都响应式网站建设公司,商城开发。萍乡网站建设公司,为萍乡等地区提供建站服务。全流程专业公司,专业设计,全程项目跟踪,成都创新互联专业和态度为您提供的服务
CSS中float用法
◆float是什么意思?
float是浮动,翻译成中文也是浮动意思。进入对应CSS手册中float手册了解float基本信息。
◆float的作用
通过CSS定义float(浮动)让div样式层块,向左或向右(靠)浮动。
◆float语法:
float:none|left|right
◆参数值:
none: 对象不浮动
left: 对象浮在左边
right: 对象浮在右边
接下来我们来通过一个DIV+CSS实例讲解float使用技巧。
DIV CSS实验一
CSS样式实例内容,我们让文字和图片在一个固定宽度div层内,让蓝色背景文字内容居右,小图片居左。
CSS案例演示最终效果图如下
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布局,代码如下
我是www.divCSS5.com网站,测试内容div> div>
说明:这里img标签是链接外部图片,图片名为demo.gif
最终演示结果截图
DIV 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代码和内容不变
最终演示结果截图如下:
关于CSS中float如何使用就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
网站名称:CSS中float如何使用
链接地址:http://myzitong.com/article/pcochj.html