名站导航为爱好css的朋友们提供相关的知识。
CSS教程控制文本超出指定宽度后用省略号代替,CSS教程控制文本不换行
- 此篇文章具体介绍如下
Css的float浮动属性,用于设置标签对象(如:<div>标签盒子、<span>标签、<a>标签、<em>标签等html标签)的浮动布局,浮动也就是我们所说标签对象浮动居左靠左(float:left)和浮动居右靠右(float:right)。
float是什么意思?float是浮动,翻译成中文也是浮动意思。进入对应css教程手册中float手册了解float基本信息。
float的作用:通过css教程定义float(浮动)让div样式层块,向左或向右(靠)浮动。
一、float语法
float : none | left |right
参数值:
none : 对象不浮动
left : 对象浮在左边
right : 对象浮在右边
接下来我们来通过一实例讲解float使用技巧。
二、float应用与用法
Float浮动用于设置对象靠左与靠右浮动样式,可以实现我们所需要的让DIV、SPAN等标签居左居右浮动。
简单使用语法
div{float:left}/*css教程注释:设置div对象浮动靠左(left)*/
div{float:right}/*css教程注释:设置div对象浮动靠右(right)*/
三、css教程 float浮动案例
创建一个水平菜单
使用浮动来创建水平菜单的超链接列表。
<!DOCTYPE html>
<html>
<head>
<style>
ul{float:left;width:100%;padding:0;margin:0;list-style-type:none;}
a{float:left;width:6em;text-decoration:none;color:white;background-color:purple;padding:0.2em 0.6em;border-right:1px solid white;
}
a:hover {background-color:#ff3300;}
li {display:inline;}
</style>
</head>
<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
</body>
</html>
在线运行
四、css教程浮动总结
我们要区别与文字内容靠左( text-align:left)靠右( text-align:right)样式,浮动只针对html标签设置靠左靠右浮动样式。float浮动样式没有靠中(浮动居中)的样式,如果需要让标签对象居中我们在css教程布局居中相关文字给大家详细讲解介绍(css教程 margin)。这里记住浮动靠右使用float:right,浮动靠左使用float:left样式即可。
名站网址导航
CSS教程 教程
CSS教程3 教程
CSS教程 参考手册
关于css的相关的知识就说到这里希望能够可以帮助更多的朋友们。,css,float,浮动在html中,怎么设置背景图片不重复不平铺,只显示一张图片