float作用就是在于布局，首先要介绍的是文档流（标准流），之后是浮动布局。
文档流：元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父集元素的边框换行。
浮动布局：
1、float: left | right
2、元素浮动之后不占据原来的位置（脱标）
3、浮动的盒子在一行上显示
4、行内元素浮动之后转换为行内块元素。（不推荐使用，转行内元素最好使用display: inline-block;
浮动作用：
1、文本饶图
2、导航制作
3、网页布局
?文本饶图：这里有个十分特殊的知识点，就是当红色的div浮动以后，虽然p元素也是块状元素，但是p标签并没有往上顶到红色的div下。这是因为float当初被开发出来就是为了解决文字环绕的问题。
<!DOCTYPE html><html><head> ???<meta charset="utf-8" /> ???<title></title> ???<style> ???????.box1 { ???????????width: 400px; ???????????height: 500px; ???????????background-color: yellow ???????} ???????.box2 { ???????????width: 200px; ???????????height: 200px; ???????????background-color: red; ???????????float: left ???????} ???</style></head><body> ???<div class="box1" style=""> ???????<div class="box2"></div> ???????<p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p> ???????<p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p> ???????<p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p> ???????<p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p> ???????<p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p> ???????<p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p> ???????<p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p> ???????<p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p> ???????<p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p> ???????<p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p> ???</div></body></html>效果：
?导航制作：之前制作导航都是将文字放置于一个div中，然后设置它们的a标签为行内块。现在直接设置li为浮动就行了。
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style type="text/css"> ???????body,ul,li{ ???????????margin:0; ???????????padding: 0; ???????} ???????ul,li{ ???????????list-style: none; ???????} ???????.nav{ ???????????width: 800px; ???????????height: 40px; ???????????background: pink; ???????????margin: 20px auto; ???????} ???????.nav ul li{ ???????????float: left; ???????} ???????.nav ul li a{ ???????????display: inline-block; ???????????height: 40px; ???????????font: 14px/40px 微软雅黑; ???????????padding:0 20px; ???????????text-decoration: none; ???????} ???????.nav ul li a:hover{ ???????????background: #aaa; ???????} ???</style></head><body> ???<div class="nav"> ???????<ul> ???????????<li><a href="#">百度</a></li> ???????????<li><a href="#">百度一下</a></li> ???????????<li><a href="#">14期威武</a></li> ???????</ul> ???</div></body></html>效果：
CSS——浮动demo
原文地址：http://www.cnblogs.com/wuqiuxue/p/7794307.html