被误解的Float-是魔鬼还是情非得已
如何解决浮动让父元素高度塌陷的bug？
bug？？不是所有长得不顺眼的都是虫子！浮动使高度塌陷不是bug，而是标准！因为浮动的原本作用仅仅是为了实现文字环绕效果。
清除浮动-究竟是清除浮动还是清除浮动带来的影响？
清除浮动只是一种简称，更重要的是清除浮动带来的影响。
清除浮动一般有两大基本方法：
- 方法一：
clear:both; - 方法二：父元素BFC（IE8+） or haslayout（IE6/7）
这两个方法的差异在于：
第一种方法：好比在峡谷之间搭建了一条索道，两峡谷可以通行，也能与外界接触。
第二种方法：BFC好像形成了一个封闭的结构，保护里面的任何声明，都不会对外部产生任何影响。
方法一：clear通常的应用形式：
- HTML block水平元素底部走起
<div>...<div> - CSS after伪元素底部生成
.clearfix:after{}
这两种方式都是有不足的：
- div元素法：很多裸露的div标签看上去很讨厌
- after伪元素：根本不认识IE6和IE7，很容易奔溃
方法二：BFC/haslayout通常声明：
- float:left/right
- position:absolute/fixed
- overflow:hidden/scroll(IE7+)
- display:inline-block/table-cell(IE8+)
- width/height/zoom:1/…(IE6/IE7)
BFC方法的不足：
- 无法“一方通行”，不是所有元素都浮动或所有元素绝对定位
- 你我相逢不相识，即兼容性问题，很多浏览器不认可zoom:1
Float的滥用-不在其职而谋其政
问世间砌砖头为何物，为何float可以用来砌砖头？
- 元素block块状化（砖头化）
- 破坏性的紧密排列特性（去空格化）
浮动的砌砖问题：
- 容错器糟糕，很容易出问题，比如错位和一些维护性问题
- 需要的尺寸是一直固定的，很难复用
- 在低版本IE下会有很多
Float与流体布局-我本流体布局生，无奈苦逼砌砖头
文字环绕的衍生-单侧固定（左侧固定+右侧自适应）
基本结构如下：
width+float
padding-left/margin-left
DOM与显示位置匹配的单侧固定布局（右侧固定+左侧自适应）
基本结构如下：
width:100%+float
padding-lefg/margin-left
width+float+margin负值
高级进化-智能自适应尺寸（左右都自适应）
基本结构如下：
float
display:tabel-cell (IE8+)
display:inline-block (IE7)
Float与兼容性-不同的老爸不同的命
IE6已死，有事烧纸
让IE7飙泪的浮动问题：
- 含clear的浮动元素包裹不正确的问题
- 浮动元素倒数2个莫名垂直间距问题
- 浮动元素最后一个字符重复问题
- 浮动元素楼梯排列问题
- 浮动元素和文本不在同一行的问题