什么是浮动，浮动有什么作用？
1.浮动的前世今生
从Netscape1以来，就可以通过声明让图像浮动，如：
<img src="b5.gif" align="right">
这会导致一个图像浮动到右边，而允许其他内容如文本“围绕”该图像。
可见浮动的初衷是为了实现文字环绕效果；
过去只可能浮动图像。但CSS允许浮动任何元素，从图像到段落再到列表，所有元素都可以浮动。在CSS中，这种行为是用属性float实现。
2.float取值
值：left、right、none、inherit
初始值：none
应用于：所有元素
继承值：无
计算值：根据指定确定
3.浮动的特性：包裹与破坏
什么是包裹（对本身而言）：包裹是收缩、坚挺（有高度了）、隔绝（内部内容与外界不相关）
具有包裹的其他小伙伴：
display: inline-block/table-cell/…
position: absolute/fixed/sticky
overflow: hidden/scroll
什么是破坏（对父元素而言）：容器被破坏，父元素的高度塌陷
具有破坏的其他小伙伴：
display: none
position: absolute/fixed/sticky
对于浮动元素有几点要记住。
首先，会以某种方式将浮动元素从文档的正常流中删除，不过它还是会影响布局。
采用CSS的特有方式，浮动元素几乎自成一派，不过它们还是对文档的其他元素有影响。
4.清除浮动
由于浮动具有破坏性，那我们怎么清楚浮动带来的影响；有以下三种方式：
(1)浮动元素脚底插入clear：both
注意：脚底插入的标签是要为block元素；
直接把<div style="clear:both;"></div>放到当作最后一个子标签放到父标签那儿，此方法兼容性强，使用方便，但是浪费了一个标签，而且只能使用一次，而且有时候如果不注意中间多了个空格会产生一段空白高度。
优点：通俗易懂，容易掌握；
缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦；只是解决了浮动，但新添加的标签会与父元素外面的元素发生margin重叠；
(2)使用after伪对象清除浮动（与第一种方法原理相同）
该方法只适用于非IE浏览器，因为IE6/IE7不认识伪元素,具体写法可参照下面例;
.fix{zoom:1;}
.fix:after{
display:block;
content:'.';
clear:both;
line-height:0;
visibility:hidden;
}
对于伪元素可以使用下面的方案，不用写太多东西：
.clearfix:after { content: ''; **display: table**; clear: both; }
.clearfix { *zoom: 1; }
使用中需注意以下几点：
a.该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；
b.content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值 设为”.”，但我发现为空亦是可以的。
c.line-height:0写成height:0也是可以的。不会影响任何其他样式，通用性强，覆盖面广;
(3)BFC/haslayout解决
例如给包含浮动元素的父标签添加css属性.clearfix{overflow:hidden; zoom:1;}
其中zoom:1用于让IE6/IE7haslayout又不影响形体的神器。
此方法优点在于代码简洁，涵盖所有浏览器，可是对于overflow:hidden;要是里面的元素要是想来个margin负值定位或是负的绝对定位，岂不是直接被裁掉了，所以此方法是有不小的局限性的。
优点：不存在结构和语义化问题，代码量极少；父元素把子元素都包裹起来了，子元素不会与外层的元素发生margin重叠；
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
BFC/haslayout通常有以下声明：
- float:left/right
- position:absolute/fixed
- overflow:hidden/scroll(IE7+)
- display:inline-block/table-cell(IE8+)
- width/height/zoom:1/…(IE6/IE7)
(4)总结：
此三种方法各有利弊，使用时应择优选择，比较之下第二种方法更为可取；
可以使用兼容性的解决方案：
.clearfix:after { // 解决IE8+
content: '';
display: block;
height: 0;
overflow: hidden;
clear: both
}
.clearfix {*zoom: 1;} // 解决IE6/IE7
5.浮动的滥用
浮动的两大特性：元素block块状化（砌砖头）、破坏造成的紧密排列特性（去空格化）
block化即当元素增加浮动属性，其display属性转化为block;
去空格化是指当元素增加浮动属性，后面的空格 或者换行符\n都被移到后面了，实现了文字环绕效果；而换行符在标签的末尾没有任何表现， 可以选中；
砌砖布局的问题：
妙脆角-嘎吱脆； // 容错性比较糟糕，容易出问题
吝啬鬼-重用废； // 尺寸限定，模块到另外一个尺寸容器中，不配对，要重新整，完全没有重用性；
洋葱头-IE7飙泪； // 在低版本的IE有很多问题
6.float与流体布局
单侧固定（有两种方式）：
width+float // 这一种是设置紧跟元素的width并设置为右浮动
padding-left/margin-left // 这一种是不设置width，只设置margin-left\
或者padding-left，让其自然适应
DOM与显示位置匹配的单侧固定布局：
width:100% + float // 外层
padding-left/margin-left //设置margin-right，以防父元素的后面元素margin-left进父元素后，内容被父元素内容覆盖
width + float + margin负值 // 设置width和margin-left负值，使其进入上面元素内
高级进化 – 智能自适应尺寸（推荐）：
float
display: table-cell; width: 2000px; IE8+
*display: inline-block; *width: auto; IE7-
7.浮动与兼容型
IE7的浮动问题：
含clear的浮动元素包裹不正确的问题
浮动元素倒数两个莫名垂直间距问题
浮动元素最后一个字符重复问题
浮动元素楼梯排列问题
浮动元素和文本不在同一行的问题