CSS float 属性

示例

让图片向右浮动：

img {
float: right;
}

亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个float属性指定元素是否应向左浮动、向右浮动或根本不浮动。

笔记：绝对定位的元素会忽略float属性！

笔记：浮动元素旁边的元素将围绕其流动。为了避免这种情况，请使用清除属性或clearfix hack（参见本页底部的示例）。

展示演示❯

默认值：	没有任何
遗传：	不
可动画：	不。阅读可动画的
版本：	CSS1
JavaScript 语法：	对象.style.cssFloat="left"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
float	1.0	4.0	1.0	1.0	7.0

CSS 语法

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

属性值

Value	Description	Demo
none	The element does not float, (will be displayed just where it occurs in the text). This is default	Demo ❯
left	The element floats to the left of its container	Demo ❯
right	The element floats the right of its container	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about 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%;
}

亲自试一试 »

示例

使用带有超链接列表的 float 来创建水平菜单：

.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%;}

亲自试一试 »

示例

使用 float 创建一个包含页眉、页脚、左侧内容和主要内容的主页：

.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%;}

亲自试一试 »

示例

不允许浮动元素位于指定 <p> 元素的左侧或右侧：

img {
float: left;
}

p.clear {
clear: both;
}

亲自试一试 »

示例

如果浮动元素比包含元素高，它将溢出其容器之外。可以使用 "clearfix hack" 修复此问题：

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

亲自试一试 »

码农教程 - 一技在手,衣食无忧!

CSS float 属性

示例

定义和用法

浏览器支持

CSS 语法

属性值

更多示例

示例

示例

示例

示例

示例

示例

示例

相关页面