04浮动原理

float：

float:left | right | none | inherit

1、块在一行显示

2、内嵌支持宽高

3、默认内容撑开宽度

4、脱离文文档流

5、提升层级半层

-------------------------------------文档流--------------------------------

文档流是文档中可显示对象在排列时所占用的位置。

浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。

clear:left | right | both | none | inherit；元素的某个方向上不能有浮动元素

clear:both;在左右两侧均不允许浮动元素

-------------------------------------清除浮动方法---------------------------

1、加高（扩展性不好）

2、父级浮动（margin左右会消失，页面所有元素都得加浮动）

3、inline-block（margin左右会消失）

4、空标签（ie6最小高度19px）height：0；font-size:0（overflow：hidden）;

5、overflow：hidden（需要配合宽度或zoom兼容ie6和ie7）

6、br（结构，样式，行为分离）

7、after伪类

-------------------------------------浮动兼容性问题--------------------------

IE6双边距BUG（IE6下块属性标签浮动，并且有横向margin，横向margin加倍。）

1、IE6

2、块元素（加display：inline-block）

3、浮动

4、横向margin

IE6下 li部分兼容性问题：

a、左右两列布局，右边右浮动IE6 IE7下折行；(左边元素浮动)

b、IE6 IE7li下元素都浮动 在IE6 IE7下 li 下方会产生3px间隙问题；（加vertical-align:top；）

vertical-align 垂直对齐方式

a、加垂直对齐方式的同排元素都要加垂直对齐方式；

b、垂直对齐方式可以解决元素下方间隙问题；

图片下方间隙问题

a、display:block; (改变标签本身特性)

b、overflow:hidden; (必须知道图片高度)

d、vertical-align (暂时最完美的方案)