CSS浮动Float——基础知识及兼容性问题

先说一下浮动的基本定义：浮动的框可以向左或向右移动，直到它的外边缘碰到父级边界或另一个浮动框的边框为止。由于浮动框不在文档流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。那么就要说一下文档流了，文档流是文档中可显示对象在排列时所占用的位置（可以认为各个元素原本默认的位置）。那我们在实际应用哪里会遇到这种问题呢。例如我们现在需要把几个块级元素放在一排，我们可以使用display：inline；但是这样我们无法改变高度，也可以使用display：inline-block；但是这样的话也存在换行符被解析，IE6、IE7不兼容的问题。现在可以使用Float来修饰，下面我们说一下不同的实现方法并对其进行说明：

要想使用Float，先来简单介绍一下

float浮动： 

1、块在一排显示（使块元素在一排显示）

2、内联支持宽高（使内联元素支持设置高度）

3、默认内容撑开宽度（没有宽度自动撑开）前几个与inline-block效果相同

      4、脱离文档流（浮动元素有可能会覆盖正常文档流中内容）

5、提升层级半层（浮动会挤开元素内的内容）

float:left | right | none | inherit;（左，右，没有浮动，与父类相同）

clear:left | right | both | none | inherit；元素的某个方向上不能有浮动元素（左，右，左右两边，无，继承父类）

如果两个元素一个带float一个不带，带浮动的会浮动半层，飘起来覆盖住另一个元素。但在使用过程中浮动也会带起意想不到的问题：如果父类包含一个浮动元素，浮动元素并不会撑开父类造成意想不到的问题，下面有几种解决办法：

1.加高（给父类加一个固定高度）

问题：扩展性不好（如果使高度，接下来如果内容更改，也必须同时更改父类的高）

2.父级浮动（给父类也加上浮动）

问题：页面中所有元素都加浮动，margin左右自动失效（floats bad ！）

3.inline-block 清浮动方法：

问题：margin左右自动失效；

4.空标签清浮动（定义一个空div，并清除左右浮动）

问题：IE6 最小高度 19px；（解决后IE6下还有2px偏差）

5.br清浮动（给浮动元素后加上br标签，并清除左右浮动）

问题：不符合工作中：结构、样式、行为，三者分离的要求。

6.after伪类 清浮动方法（现在主流方法）

.clear:after{content:'';display:block;clear:both;}
.clear{zoom:1;}
           

after伪类： 元素内部末尾添加内容；

:after{content"添加的内容";} IE6，7下不兼容

zoom 缩放 

a、触发 IE下 haslayout，使元素根据自身内容计算宽高。

b、FF 不支持；

7.overflow:设置是否显示滚动条；

问题：需要配合 宽度 或者 zoom 兼容IE6 IE7；

overflow:  scroll | auto | hidden；

overflow:hidden;溢出隐藏（裁刀！）