css float 浮动属性使用方法和实例讲解

时间：2016-10-13

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 float 浮动属性使用方法和实例讲解

一、float语法

二、float应用与用法

三、css float浮动案例

四、css浮动总结

相关文章

最新文章