精简高效CSS系列之二——浮动float

一、浮动基础知识

假如一个页面上有3个div块，如下排列：

图1：不使用浮动

图2：向右浮动

图2说明了框1脱离了文档流向右移动，直到它的右边缘碰到包含框的右边缘为止。

图3：向左浮动

图3说明了框1向左浮动，脱离文档流向左移动，直到它的左边缘碰到框2的左边缘为止，由于框1脱离了文档流，不占据空间，框2处于文本流中，所以框1覆盖了框2。

      上面3个图说明了，浮动既可以向左也可以向右，直到它的外边缘碰到包含框或者另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

下面用代码实现一下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>体验CSS</title>
<style type="text/css">
<!--
/*上一行避免老式浏览器不支持CSS*/
body{
	padding:0px;
	margin:0px;
	background-color:#FFFF99;}
#title{

	font-size:19px;
	font-weight:bold;
	text-align:center;
	padding:15px;
	background-color:#FFFFCC;
	border:1px solid #FFFF00;}
#content{
	padding:6px;
	font-size:13px;
	line-height:130%;/*行间距*/}
img{
	float:left;/*图文混排*/
	filter:alpha(opacity=100,finishopacity=0,style=2);/*渐变效果*/}
</style>
</head>

<body>
<div id="title">CSS简介</div>
<div id="content">
<img src="file:///F|/02 B—S阶段/9.1精通CSS.DIV网页样式与布局/书中实例/第1章/bike.jpg" border="0" />
CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS是1996年由W3C审核通过，并且推荐使用的。简单的说CSS的引入就是为了使得HTML能够更好的适应页面的美工设计。它以HTML为基础，提供了丰富的格式化功能，如字体、颜色、背景、整体排版等等，并且网页设计者可以针对各种可视化浏览器设置不同的样式风格，包括显示器、打印机、打字机、投影仪、PDA等等。CSS的引入随即引发了网页设计的一个又一个新高潮，使用CSS设计的优秀页面层出不穷。
</div>
</body>
</html>

效果如下：

这个例子是图文混排，把图片设置为左浮动。

二、那么如何清除浮动呢？

清除浮动（clear）是float的一个属性。

语法：
 
       clear : none | left | right | both
 
       取值：
 
       none  :  默认值。允许两边都可以有浮动对象
 
       left   :  不允许左边有浮动对象
 
       right  :  不允许右边有浮动对象
 
       both  :  不允许有浮动对象

    

对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。

例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css清除浮动</title>
<style>
.float
{
  float:left;
  width:200px;
  height:100px;
  background:#6E6E6E;
}
.clear
{
  clear:left;
  float:left;
  width:200px;
  height:100px;
  background:#999999;
}
</style>
</head>

<body>
  <div class="float">这是一个浮动元素</div>
  <div class="clear">这是一个清除浮动属性的元素</div>
</body>
</html>

效果：

三、CSS浮动总结

浮动能使得块级标签排在同一行，但由于浮动脱离了文档位置，因为假如浮动层有一个不浮动的父亲层，父亲层是包不住浮动层的，就得清除浮动。关于CSS浮动本篇文章只是简单介绍了一下，还有更多的内容等待着去挖掘。