浮动特点及相关问题

特点

1. 浮动元素显示在一行

2. 使内嵌元素支持宽高

3. 不设置宽度的时候，宽度由内容撑开

4. 支持margin(但margin：0 auto不起作用)

5. 换行不会被解析成空格

6. IE6,7下支持

7. 脱离文档流

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

8. 提升层级半层

   提升的高度只能够放下一个元素的本身，而元素里面的内容会被挤出

注意：

（1）clear:left/right/both/none只能作用于块级元素

（2）浮动元素的顶部会尽量与上一个浮动元素的顶部对齐

（3）IE6下双边距的BUG

在IE6下，块元素有浮动和横向的margin（margin-left或margin-right）,横向的margin值会被放大两倍

解决办法：margin:inline

（4）IE6下高度小于19px的元素，高度会被当做19px来处理

   font-size:0最小只能处理到2px

解决办法：overflow:hidden,会将超出高度之外的东西都隐藏

（5）IE7/6下li几px的问题

解决办法：IE7/6下，li本身没浮动，但是内容有浮动，就会有几px的问题。

解决办法：给li加浮动

          给li加vertical-align:top/middle/bottom

vertical-align:设置多个元素的垂直对齐方式，在每个元素上都要添加，才起作用。对浮动元素不起作用，因为浮动元素默认就为顶部对齐，若不希望浮动元素顶部对齐，只能设置上下外边距来控制

（6）清除img的下面空隙：

display:block

vertical-align:top/middle/bottom

给父元素加：font-size:0