首页 > web前端 > css教程 > 正文

在css中float属性的属性值有哪些

青灯夜游
发布: 2023-01-03 09:24:43
原创
15771 人浏览过

在css中,float属性用于定义元素在哪个方向浮动,可以设置的属性值有:1、“left”,定义元素向左浮动;2、“right”,定义元素向右浮动;3、“none”,定义元素不浮动,并会显示在其在文本中出现的位置;4、“inherit”。

在css中float属性的属性值有哪些

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

CSS中的float属性是一个频繁用到的属性,对于初学者来说,如果没有理解好浮动的意义和表现出来的特性,在使用的使用很容易陷入困惑,云里雾里,搞不清楚状态。

float属性

float,顾名思义就是浮动,设置了float属性的元素会根据属性值向左或向右浮动,我们称设置了float属性的元素为浮动元素。

元素使用了float属性后,可以使该元素脱离标准流本身,浮动在其他元素之上,使其不再占用原本属于该元素的空间,这样会导致后面的元素上移并占用原本属于该元素的空间。

属性值

  • left:元素向左浮动。

  • right:元素向右浮动。

  • none:默认值。元素不浮动,并会显示在其在文本中出现的位置。

  • inherit:规定应该从父元素继承 float 属性的值。    

【推荐教程:CSS视频教程

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>css float属性</title>
<style>
img 
{
	float:right;
}
</style>
</head>

<body>
<p>在下面的段落中,我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
<p>
<img src="img/1.jpg" width="95" height="84" />
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>

</html>
登录后复制

效果图:

1.png

更多编程相关知识,请访问:编程视频!!

以上是在css中float属性的属性值有哪些的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板