CSS float 属性

实例

把图像向右浮动:

img {
float: right;
}

亲自试一试 »

下面有更多实例。

定义和用法

float 属性定义元素在哪个方向浮动。

注释: 绝对定位的元素忽略 float 属性！

注释: 浮动元素之后的元素将围绕它流动。要避免这种情况，请使用 clear 属性或 clearfix hack（参见本页底部的示例）。

默认值:	none
继承性:	no
支持动画:	no. 阅读有关动画的信息
版本:	CSS1
JavaScript 语法:	object.style.cssFloat="left" 测试一下

浏览器支持

表中的数字表示支持该属性的第一个浏览器版本。

属性
float	1.0	4.0	1.0	1.0	7.0

语法

float: none|left|right|initial|inherit;

属性值

值	描述	试一试
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。	亲自试一试 »
left	元素向左浮动。	亲自试一试 »
right	元素向右浮动。	亲自试一试 »
initial	将此属性设置为其默认值。请参阅 initial	亲自试一试 »
inherit	从其父元素继承此属性。请参阅 inherit

更多实例

实例

让图像向左浮动:

img {
float: left;
}

亲自试一试 »

实例

让图像正好显示在文本中出现的位置(float: none):

img {
float: none;
}

亲自试一试 »

实例

使段落的首字母浮动于左侧，并向这个字母添加样式。

span {
float: left;
width: 0.7em;
font-size: 400%;
font-family: algerian, courier;
line-height: 80%;
}

亲自试一试 »

实例

使用具有一栏超链接的浮动来创建水平菜单。

.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}

.column {
float: left;
padding: 15px;
}

.clearfix::after {
content: "";
clear: both;
display: table;
}

.menu {width: 25%;}
.content {width: 75%;}

亲自试一试 »

实例

使用浮动来创建拥有页眉、页脚、左侧目录和主体内容的主页。

.header, .footer {
background-color: grey;
color: white;
  padding: 15px;
}

.column {
float: left;
padding: 15px;
}

.clearfix::after {
content: "";
  clear: both;
  display: table;
}

.menu {width: 25%;}
.content {width: 75%;}

亲自试一试 »