css float属性 CSS float 属性

css float属性

CSS float 属性定义元素如何浮动，即元素在页面上的位置。它可以让文本环绕图像，或者让多个元素同时浮动，以便在不同的方向上创建复杂的布局。

float: left | right | none | inherit;

float 属性有四个值：left、right、none 和 inherit。left 和 right 值可以让元素浮动到左侧或右侧；none 值会阻止元素浮动；inherit 值会从其父元素处继承 float 的值。

当一个元素使用 float 时，它会脱离文档流并向左或右浮动，直到它的外边框遇到包含框或另一个浮动框为止。这意味着该元素将不再影响页面中剩余内容的布局。

float 生成的框是一个“盒子”，就像 position 中生成的框一样。这意味着你可以使用 margin 来调整该框与周围内容之间的间隔，也可以使用 padding 来调整该框中内容与该框之间的间隔。

CSS float 属性

CSS float 属性

实例

让图像向右侧浮动：

img
{
float:right;
}

在此页底部有更多的例子。

---

属性定义及使用说明

float属性指定一个盒子（元素）是否应该浮动。

注意： 绝对定位的元素忽略float属性！

默认值：	none
继承：	no
版本：	CSS1
JavaScript 语法：	object.style.cssFloat="left"

---

浏览器支持

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

属性
float	1.0	4.0	1.0	1.0	7.0

---

属性值

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

---

更多实例

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

创建一个水平菜单
使用浮动来创建水平菜单的超链接列表。

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

---

相关文章

CSS 教程: CSS Float