CSS float

CSS浮动float：

浮动的意义：浮动出现的意义其实只是用来让文字环绕图片而已，仅此而已

浮动的本质：“包裹与破坏”

1. 撇开浮动的“破坏性”，浮动就是个带有方位的display:inline-block属性

2. 文字之所以会环绕含有float属性的图片时因为浮动破坏了正常的line boxes，具体的就是浮动破坏了图片的inline box，产生了两个结果：一是图片无法与文字同行显示，脱离了其原来所在的line box链；二是没有了高度（无inline box -> 无line box -> 无高度）。而这些结果恰恰是文字环绕图片显示所必须的。

由于浮动破坏了inline box,因此当前行所在的其他inline box的宽度将不再由当前浮动的元素决定，假设其他的lnline boxs都是匿名的inline boxes, 这时的行高将由元素的字体大小决定，在多行的效果下，会形成line boxes的行高，其次，由于其他匿名inline boxes 会为 float的元素留出其所必须的空间大小的位置，类似在所有其他匿名lnline boxes的left和top的位置增加一个横切面，这个横切面用来插入一个大小为浮动元素大小的浮动元素，从而产生类似文字环绕的效果。

3. 使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。

4. 使用absolute脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它,定位元素会占据该元素原先的位置，因此会发生覆盖的效果。切记，对于absolute,是相对于他的父节点依次向上找，知道找到一个具有relative或者是absolute的元素位置，并以当前找到的元素为参考进行绝对定位。

5. 综上所述，浮动具有包裹性和破坏性，如何理解这两个特性形成的最终结果：

浮动元素首先让一个元素成为了一个具有方向性的内联元素(inline-block),这样的话，浮动元素就能够和其他内联元素一起成为形成line boxs模型的基础，这就形成了浮动元素能够向上兼容的原因，其次，为了形成文字环绕的效果，浮动元素又会打破传统的inline box模型，因为line box(内部的inline boxes的上下最大绝对差值)的高度的形成的基础就是和inline box的高度有关，因此，打破了这种模型之后的line box将会剔除当前浮动元素对line box模型高度的影响，假设其他的所有元素都是匿名inline boxes, 这时候这些匿名inline boxes的高度将完全的决定了line box，假设我们用了top, left这些属性进一步的给浮动元素一个位置，并且图片的大小大于等于当前的font-size*1.14倍，从而就有至少两行的元素包围在图片的周围，形成文字环绕的效果，此外，切记浮动元素尽管脱离了文档流，但是为了实现这种环绕的效果，浮动元素其实并没有真正的脱离普通文档流，其他元素会给该元素留下展示所需要的位置，这个地方的脱离文档流要辩证的看待才可以。

☆浮动的“包裹性”让元素变成类似于inline box的元素，而浮动的“破坏性”正是破坏inline box元素的，这其中岂不有矛盾。其实非也，对于block水平的这类块状元素需要先让其变成类似效果的内联元素，然后再破坏之，实乃先诱拐再奸杀的生动实例啊！

6. 同一个方向的浮动元素: 当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面，可以用这样一个形象的比喻来描述： 在一个购票中心里，某人从一条购票队列跑到旁边的一条购票队列中排队，那自然先跑过去的会先占据前面的位置。但这条购票队列还是位于当前的购票中心中 ，因此这条浮动的队列和正常的文档流队列也依旧在同一个父元素当中。

7. 反方向的浮动元素：正如上面的比喻所述，我们可以假设购票中心里左右两边的各有一个购票点（如图,这里我们把一个div看做一个购票者），左浮动的队列可看做左购票点的购票队列，反方向的浮动（即右浮动）则是右边购票点的购票队列，所以在购票中心足够宽的时候两条队列的人群是互不受影响的。因此他们在同一条水平线上

8. 浮动的“本职工作”：文字环绕显示；浮动的“非本职工作”：列表布局；两者都是用的同样的原理解释的，那么有什么证据可以证明“页面布局”不是浮动的“本职工作”呢。答案关键字就是：高度塌陷。

9. 对于浮动局部的局限性，就是每个列表元素的高度必须要一致，否则就会像是俄罗斯方块一样，“锯齿相错”，例如一个左浮动列表布局，如果第一行有个列表高度高于其他列表，那就在第二行，第一个元素会沿着最高元素的右侧对齐，此原因是属于恶魔系的float属性破坏了inline box，所以，如果我们要使用浮动布局列表，就必须限高。

清除浮动的方法：
1. 父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握 
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题 
建议：不推荐使用，只建议高度固定的布局时使用 
2. 添加一个空div(必须是block)，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单、代码少、浏览器支持好、不容易出现怪问题 
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好 
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法 
3. 父级div定义 伪类:after 和 zoom
优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等） 
缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。 
建议：推荐使用，建议定义公共类，以减少CSS代码。
4. 父级div定义 overflow:hidden (必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度 )
优点：简单、代码少、浏览器支持好 
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。 
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。 
5. 父级div定义 overflow:auto (必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度 )
优点：简单、代码少、浏览器支持好 
缺点：内部宽高超过父级div时，会出现滚动条。 
建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。 
6. 父级div 也一起浮动/父级div定义 display:table /结尾处加 br标签 clear:both (原理：所有代码一起浮动，就变成了一个整体 )
优点：没有优点 
缺点：会产生新的浮动问题。 
建议：不推荐使用，只作了解。

.fix{zoom:1;}
.fix:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}