提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > CSS中float属性怎样运用【css教程】,float属性

运用CSS中的float属性能够将运用的元素从底本的位置挪动到左上或向右挪动。不适用于float的内部元素,如文本等会被设置在float元素的四周。

我们来看float的细致运用方法

float属性形貌以下

float: 值;

值的部份有以下几个

none:不指定元素的位置。(初始值)

left:把元素移到左边。

right:把元素移到右边。

别的,假如值是inherit的话,会继续父元素float的值

假如在统一元素中设置了position属性的初始值(static)之外的值的话,就不能运用float属性。

假如要将float属性运用于块元素的话,必须先设置width属性的宽度。

假如想消灭floate属性的话,在clear属性中输入雷同值(比方float输入left就输入left、float输入right就输入right)。别的,clear输入both的值的话,双方都能够消灭。

下面我们来看float属性运用的细致示例

起首我们来看float:left;

在宽度为170px,高度为100px的盒子中设置图象和笔墨,在图象上设置float属性为left时的例子。

代码以下:

HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<p class="content1"><img src="img/mouse.png" alt="图象" style="width: 45px;height: 45px">
在图象上运用float:left的例子:笔墨在右边显现,剩下部份的笔墨在图象的下面被显现</p>
</body>
</html>

CSS代码

p.content1 {background-color: #b0e0e6; width: 170px; height: 100px; }
img {float: left;}

在浏览器上显现以下结果

图象在左边显现,笔墨环绕在图象右边和下侧。

然后我们再来看float:right;

代码以下

HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<p class="content1"><img src="img/mouse.png" alt="图象" style="width: 45px;height: 45px">
在图象上运用float:right的例子:笔墨在左边显现,剩下部份的笔墨在图象的下面被显现</p>
</body>
</html>

CSS代码

p.content1 {background-color: #b0e0e6; width: 170px; height: 100px; }
img {float: right;}

在浏览器上显现以下结果

图象在右边显现,笔墨围绕在图象左边和下侧。

以上就是本篇文章的全部内容了,更多相干的精彩内容人人能够移步到ki4网的CSS视频教程栏目进一步进修!!!

以上就是CSS中float属性怎样运用的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"CSS中float属性怎样运用【css教程】,float属性"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线