CSS中的float怎么使用

这篇文章主要介绍“CSS中的float怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“CSS中的float怎么使用”文章能帮助大家解决问题。

创新互联公司主营邵东网站建设的网络公司,主营网站建设方案,app开发定制,邵东h5成都小程序开发搭建,邵东网站营销推广欢迎邵东等地区企业咨询

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布局，代码如下

<divclassdivclass="box"> <divclassdivclass="yangshi">我是www.divCSS5.com网站，测试内容div> <imgsrcimgsrc="demo.gif"/> 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怎么使用
当前链接：https://www.cdcxhl.com/article30/gpejpo.html

成都网站建设公司_创新互联，为您提供做网站、网站制作、品牌网站制作、、网站维护、建站公司

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联