在div+css中浮动分为 左浮动，右浮动，清除浮动
① 右浮动
所谓右浮动 ，指 一个块元素向右移动，让出自己空间， 向右移动直到碰到包含自己的父元素的最右边的边框.
② 左浮动
所谓左浮动 ，指 一个块元素向左移动，让出自己空间， 向右移动直到碰到包含自己的父元素的最左边的边框.
快速入门 :
理论完了以后直接开门见山来段代码：
float.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta charset="UTF-8"/> <title>盒子模型2</title> <link rel="stylesheet" type="text/css" href="div.css"> </head> <body> <div class="div4"> <div class="div1"> div1 </div> <div class="div2"> div2 </div> <div class="div3"> div3 </div> </div> </body> </html>
div.css
.div1
{
width: 150px;
height: 150px;
border: 1px solid blue;
background: pink;
}
.div2
{
width: 400px;
height: 400px;
border: 1px solid blue;
}
/* id选择器 */
#special
{
float: right; /* 右浮动 */
}
从这个案例我们可以看出，所谓左浮动就是指: 某个块元素尽量向左边移动，这样就让出它右面的空间，让别的块元素显示.
浮动的特别说明:
如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮
动元素“卡住”：直到有足够空间.
? 如果使用浮动属性 ： 则该元素不管是不是块元素，都会按照 display: block来显示.
小总结:
你可以这么理解浮动:如果一个元素右/左浮动则:
①它本身会尽可能向右/左移动，直到碰到边框或者
别的浮动元素,特别强调浮动对块元素和行内元素都
生效!
②元素向右/左浮动，就相当于让出自己的左/右边,别
的元素就会在它的左/右边排列。
原文：http://blog.csdn.net/chenqiai0/article/details/42834335