float大概是css3以前网页布局里最常用的一个属性了，经常看到一言不合就浮动的代码，就一起来深入挖掘一下这个一半天使一半魔鬼的属性吧。
本文是读张鑫旭大神慕课网float视频后的一些总结及一些拓展用法。该视频初读很枯燥，认真读后会发现更枯燥。。。。。。不过遇到坑之后再去读就会发现良心视频，字字珠玑。闲话不多说，现在开始：
1.float的起源
浮动最初的设计是用来做文字的环绕效果的，这也是设计者想让我们做的东西。
2.float的参数
立即学习“前端免费学习笔记（深入）”；
float属性的参数取值有三个：
left：表示元素浮动在左边。
right：表示元素浮动在右边。
none：对象不浮动，遵循标准文档流。
3.效果展示（以float：left为例，float：right的情况只是位置的不同）
p1
p2有float
p3
span1span2span3有floatp4有float
span4
当浏览器宽度不够长时：
当浏览器宽度足够长时：
我们可以得出以下几个结论：
当浮动元素为块状元素时，他的下一个紧邻元素（不浮动）是块状元素时会与该浮动元素发生重叠，该浮动元素会在上方。如果下一个紧邻元素为内联元素时会紧跟该浮动元素。
当浮动元素为内联元素时，他的下一个紧邻元素（不浮动）是块状元素时不会移动，但宽度不够也会发生重叠。如果下一个紧邻元素为内联元素时会紧跟该浮动元素。
4.浮动的破坏性
设置了float的元素会脱离文档流，会导致其父元素出现高度“坍塌”。
我还没设置float属性
2088shop商城购物系统是商城系统中功能最全的一个版本：非会员购物、商品无限级分类、不限商品数量、商品多级会员定价、上货库存、Word在线编辑器、订单详情销售报表、商品评论、留言簿、管理员多级别、VIP积分、会员注册积分奖励、智能新闻发布、滚动公告、投票调查、背景图片颜色更换、店标上传、版权联系方式修改、背景音乐（好歌不断）、广告图片支持Flash、弹出浮动广告、搜索引擎关健词优化、图文友情联
我设置了float属性
5.浮动的包裹性
这是没有float的p
这是个带有float的p
6.浮动去空格
这个已经在上面代码和结论中中有所展示，简单来说就是正常文档流中两个内联元素之间以及上下会默认有一段缝隙，而浮动可以清除这个缝隙，让两个元素无缝结合，也会清除上下之间的缝隙。
7.清除浮动的影响
7.1 使用clear属性
a.将放到当作最后一个子标签放到父标签那儿，也是最简单的清除浮动的方法，但是不推荐。
我设置了float属性
b.after伪元素和zoom
after，就是指标签的最后一个子元素的后面。因此我们可以用CSS代码生成一个具有clear属性的元素
我设置了float属性
但是ie6/7无法识别伪元素after，就得用zoom方式，例：
.myp{
border:3px dashed #ddd;
zoom:1
}
7.2
给父元素添加浮动，或者overflow:hidden,position:absolute等可以使元素BFC化的属性，下节单独探讨BFC的生成条件和布局规则，例：
我设置了float属性
关于float的布局以及清除影响就先到这了，有遗漏和错误的地方欢迎指正，下节来一起看看BFC到底是什么，他是如何布局的，为什么可以用来清除浮动。
