我个人认为我们可以这样理解浮动(如有什么不对的，欢迎指正)，在平常我们用到块级元素的时候，如果我们将两个块级元素嵌套在一个div中，在正常情况下，这两个块级元素会从上到下一次排列，即一个在上，一个在下，如果我们希望做到将这两个块级元素排列在一排(在这两个块级元素的宽度相加没有超过它们的父元素的宽度的情况下)，我们可以用float属性对其进行设定。例子如下
<!DOCTYPE html>
<html>
<head>
<title>浮动</title>
<meta charset="utf-8" />
<style type="text/css">
.all{
width: 250px;
height: 250px;
background-color: #faa;
}
.div1{
width: 100px;
height: 100px;
background-color: #7BBD53;
margin-left: 10px;
/*添加浮动*/
float: left;
}
.div2{
width: 100px;
height: 100px;
background-color: yellow;
margin-left: 10px;
/*添加浮动*/
float: left;
/*必须两处都添加浮动才能达到效果。*/
}
</style>
</head>
<body>
<div class="all">
<div class="div1">div1</div>
<div class="div2">div2</div>
</div>
</body>
</html>在没有添加浮动之前
添加向左浮动：
上述例子向右浮动的效果：
文本环绕的效果：
<!DOCTYPE html>
<html>
<head>
<title>围绕文本</title>
<meta charset="utf-8" />
<style type="text/css">
span.text{
width: 100px;
margin:20px;
background-color: #eea;
font-weight: bold;
float: right;
}
p{
width: 300px;
border: solid;
border-width: 2px;
border-color: #999;
padding:30px;
}
</style>
</head>
<body>
<p>
<span class="text"> 华胥引华胥引华胥引</span>
<span>这是一个发生在乱世的故事。城破之日，卫国公主叶蓁以身殉国，依靠鲛珠死而复生。当她弹起华胥调，便生死人肉白骨，探入梦境与回忆。幻术构成的曲谱里，尽是人生的辛酸与苦涩。而她与亡她国家的陈国世子，在一次幻境中相遇，身份两重，缘也两重。</span>
</p>
</body>
</html>效果：
4、清除浮动:clear(只能用于块级元素)。在某些情况下，我们想浮动元素某一个边的区域被清除，后续的元素从容器的正常位置开始显示，这时候我们可以使用clear属性阻止一个元素出现在浮动元素的后面。
<!DOCTYPE html>
<html>
<head>
<title>clear属性</title>
<meta charset="utf-8" />
<style type="text/css">
img{
float:left;
margin-right: 10px;
}
h1{
clear:left;
top-margin:2em;
}
</style>
</head>
<body>
<div style="width:300px;height:600px;">
<p>
<img src="tu.png">浮动是基于CSS的现代web设计用到的主要功能之一，它可以用来创建多列的网页布局、导航工具条等。
</p>
<h1>clear属性清除浮动元素</h1>
<p>使用clear属性组织一个元素出现在元素的后面</p>
</div>
</body>
</html>使用clear清除浮动的影响之前：
使用clear清除浮动的影响之后：
原文地址：http://blog.csdn.net/whh4122/article/details/40087677
