CSS的float怎么使用
这篇文章主要介绍“CSS的float怎么使用”，在日常操作中，相信很多人在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使用技巧。
实例一
CSS样式实例内容，我们让文字和图片在一个固定宽度div层内，让蓝色背景文字内容居右，小图片居左。
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布局，代码如下
<divclassdivclass="box"> <divclassdivclass="yangshi">我是www.divCSS5.com网站，测试内容div> <imgsrcimgsrc="demo.gif"/> div>
说明：这里img标签是链接外部图片，图片名为demo.gif
实例二
接下来我们演示使用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怎么使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注蜗牛博客网站，小编会继续努力为大家带来更多实用的文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
评论