CSS Float(浮动)

CSS Float(浮动)

什么是 CSS Float（浮动）？

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，下面的文本流将环绕在它左边：

php中文网(php.cn)

在下面的段落中，我们添加了一个 float:right 的图片。导致图片将会浮动在段落的右边。

人生如梦，亦哭亦歌，叶凋零，落叶随水流。水冰凉，曲终人已散。漪沫温婉，敛眸芬芳，轻拾一抹文字的清香，在时光的水墨里，听一段心灵，撷一段清澈;在心与心的重逢，心与心的微笑，阔一别红尘纷扰，素年锦时，这何尝不是一种最美的守候。人生在世，为求知己。吾无知己，甚感孤独。为求知己，吾已踏千山，走万水。惜无人知吾，无人解吾。甚难受，乃，莫过于父母同不知吾心。何人能知吾，吾心孤独。知己?何君是也?

运行程序尝试一下

彼此相邻的浮动元素

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

在这里，我们对图片廊使用 float 属性：

php中文网(php.cn)

图片库

试着调整窗口,看看当图片没有足够的空间会发生什么。

运行程序尝试一下

清除浮动 - 使用 clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

使用 clear 属性往文本中添加图片廊：

php中文网(php.cn)

图片库

试着调整窗口,看看当图片没有足够的空间会发生什么。.

第二行

运行程序尝试一下

更多实例

让段落的第一个字母浮动到左侧

php中文网(php.cn)

是谁曾说过，有故事的人注定会相遇，不管是以哪种方式。对有感情不愿亏欠谁，却还是欠着一些。或许等到没了信心时，等到没有希望的时候，会悄然撤离.人人都有过等待与被等待的时候。离开永远比相遇更容易，因为相遇是几亿人中一次的缘分，而离开只是两个人的结局。

运行程序尝试一下

实例

使用 float 创建一个网页页眉、页脚、左边的内容和主要内容。

    php中文网(php.cn)  
   w3cschool.cc
 "Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)
  Free Web Building Tutorials
 At w3cschool you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.
 w3cschool - The Largest Web Developers Site On The Net!
 Copyright 1999-2005 by Refsnes Data.

运行程序尝试一下

CSS 中所有的浮动属性

"CSS" 列中的数字表示不同的 CSS 版本（CSS1 或 CSS2）定义了该属性。

属性	描述	值	CSS
clear	指定不允许元素周围有浮动元素。	left right both none inherit	1
float	指定一个盒子（元素）是否可以浮动。	left right none inherit	1