float的历史
float为产生文字环绕效果而生
float的特性 — 包裹和破坏
包裹：即产生一个BFC
破坏：使父容器塌陷，元素脱离文档流，产生inline boxes环绕
清除浮动
方式一：使用clear，类似于产生一个连接索道，使前文和后文关联，会产生margin重叠效果。
- clear: both，这个元素和源码中后面的元素将不浮动
- 非浮动元素和浮动元素之间不能通过外边距撑开距离
- 因此需要一个单独的非浮动元素充当索道
方式二：父容器BFC或者haslayout(IE6/IE7) – 封闭容器，不会产生margin重叠
.clearfix:after {
content: "";
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /*IE6, IE7产生haslayout*/
}float的表现
元素block化：inline元素被block化
去空格化，空格符成为环绕文本
浮动与流体布局应用
文字环绕效果
https://codepen.io/curlywater…
左中右效果
https://codepen.io/curlywater…
单侧固定
https://codepen.io/curlywater…
DOM与显示位置匹配的单侧固定
https://codepen.io/curlywater…
第一种实现方式，保证向右浮动的元素写在前（先布局），内容区设置margin-right
第二种实现方式，为了使DOM和现实顺序一致，对内容区加一个向左浮动的盒子，没有指定宽度的盒子利用外边距保留剩余空间，实现宽度拉伸。使用负margin把左浮动的头像区移动到同行。
两侧自适应
https://codepen.io/curlywater…
使用table-cell产生一个BFC，去除掉浮动的影响
总结
浮动起源于实现文字环绕效果。
为了实现文字环绕效果，规范规定的措施是使父容器塌陷，元素脱离文档流浮动，元素周围的内容转换为inline boxes围绕元素排列。
从浮动的起因和浮动的实现后果来看，浮动不适合用于大范围的布局，更适合利用其特性实现一些小范围的流体布局效果。
