CSS Float(浮动)

什么是 CSS Float（浮动）？

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

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

元素怎样浮动

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

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

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

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

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

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>牛骨文（niuguwen.cn）</title>
<style>
img 
{
	float:right;
}
</style>
</head>

<body>
<p>在下面的段落中，我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
<p>
<img src="logocss.gif" width="95" height="84" />
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

彼此相邻的浮动元素

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

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

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>牛骨文（niuguwen.cn）</title> 
<style>
.thumbnail 
{
	float:left;
	width:110px;
	height:90px;
	margin:5px;
}
</style>
</head>

<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

清除浮动 - 使用 clear

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

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

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

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>牛骨文（niuguwen.cn）</title> 
<style>
.thumbnail 
{
	float:left;
	width:110px;
	height:90px;
	margin:5px;
}
.text_line
{
	clear:both;
	margin-bottom:2px;
}
</style>
</head>

<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。.</p>
<img class="thumbnail" src="/upload/course/000/000/010/58059d862c72d614.jpg" width="107" height="90">

<img class="thumbnail" src="/upload/course/000/000/010/58059d862c72d614.jpg" width="107" height="80">

<img class="thumbnail" src="/upload/course/000/000/010/58059d862c72d614.jpg" width="116" height="90">

<img class="thumbnail" src="/upload/course/000/000/010/58059d862c72d614.jpg" width="120" height="90">
<h3 class="text_line">第二行</h3>
<img class="thumbnail" src="/upload/course/000/000/010/58059d862c72d614.jpg" width="107" height="90">
<img class="thumbnail" src="/upload/course/000/000/010/58059d862c72d614.jpg" width="107" height="80">
<img class="thumbnail" src="/upload/course/000/000/010/58059d862c72d614.jpg" width="116" height="90">
<img class="thumbnail" src="/upload/course/000/000/010/58059d862c72d614.jpg" width="120" height="90">
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>牛骨文（niuguwen.cn）</title> 
<style>
img 
{
	float:right;
	border:1px dotted black;
	margin:0px 0px 15px 20px;
}
</style>
</head>

<body>
<p>
	在下面的段落中,图像将向右浮动。黑色虚线边界添加到图像。
我们还添加了边缘的0 px的顶部和右侧 margin,15 px底部margin,和20 px左侧的margin的图像。使得文本远离图片:</p>
<p>
<img src="/upload/course/000/000/010/58059d862c72d614.jpg" width="95" height="84" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

标题和图片向右侧浮动

让标题和图片向右侧浮动。

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>牛骨文（niuguwen.cn）</title> 
<style>
div
{
	float:right;
	width:120px;
	margin:0 0 15px 20px;
	padding:15px;
	border:1px solid black;
	text-align:center;
}
</style>
</head>

<body>
<div>
<img src="/upload/course/000/000/010/58059d862c72d614.jpg" width="95" height="84" /><br>
CSS is fun!
</div>
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

<p>
	在上面的段落中,div元素是120像素宽,它包含了图像。
	div元素会向右浮动。
	Margins 被添加到div使得文本远离div。
	Borders和padding被添加到div框架的图片和标题中
</p>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

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

改变样式，让段落的第一个字母浮动到左侧

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>牛骨文（niuguwen.cn）</title>
<style>
span
{
	float:left;
	width:1.2em;
	font-size:400%;
	font-family:algerian,courier;
	line-height:80%;
}
</style>
</head>

<body>
<p>
<span>这</span>是一些文本。
这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>

<p>
在上面的段落中, 第一个字嵌入在span 元素中。
这个 span 元素的宽度是当前字体大小的1.2倍。
这个 span 元素是当前字体的400%(相当大)， line-height 为80%。
文字的字体为"Algerian"。
</p>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

创建一个没有表格的网页

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

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>牛骨文（niuguwen.cn）</title> 
<style>
div.container
{
	width:100%;
	margin:0px;
	border:1px solid gray;
	line-height:150%;
}
div.header,div.footer
{
	padding:0.5em;
	color:white;
	background-color:gray;
	clear:left;
}
h1.header
{
	padding:0;
	margin:0;
}
div.left
{
	float:left;
	width:160px;
	margin:0;
	padding:1em;
}
div.content
{
	margin-left:190px;
	border-left:1px solid gray;
	padding:1em;
}
</style>
</head>
<body>

<div class="container">
<div class="header"><h1 class="header">w3cschool.cc</h1></div>
<div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div>
<div class="content">
<h2>Free Web Building Tutorials</h2>
<p>At w3cschool you will find all the Web-building tutorials you need,
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
<p>w3cschool - The Largest Web Developers Site On The Net!</p></div>
<div class="footer">Copyright 1999-2005 by Refsnes Data.</div>
</div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

CSS 中所有的浮动属性

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

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

CSS Float(浮动)

什么是 CSS Float（浮动）？

元素怎样浮动

实例

彼此相邻的浮动元素

实例

清除浮动 - 使用 clear

实例

更多实例

实例

实例

实例

实例

CSS 中所有的浮动属性