关于float和inline-block

inline-block属性还是非常有用的，但是在IE6 7下还是有那么点问题，现总结一下
在IE6 7下实际上对行内元素起作用但对块级元素就失去了它的作用，上代码

<div style="display:inline-block;border:1px solid red;width:100px;height:100px;">div1</div>
<div style="display:inline-block;border:1px solid blue;width:100px;height:100px;">div2</div>

IE6 7未起到效果
[img]http://dl.iteye.com/upload/attachment/553209/61248181-6e92-3aa3-9114-756715fd2d4f.jpg[/img]
firefox chrome下正常显示
[img]http://dl.iteye.com/upload/attachment/553211/6a4500dc-2c10-3ff9-a7f4-16ae2014c032.jpg[/img]

而对于行内元素IE6 7下可以实现inline-block
[img]http://dl.iteye.com/upload/attachment/553213/2c2b90b2-6184-3de7-ae5f-b20cd30dff3e.jpg[/img]

如果想在IE6 7下让块级元素也显示inline-block需要用到一下hack技术

<div style="display:inline-block;*display:inline;*zoom:1;border:1px solid red;width:100px;height:100px;">div1</div>
		<div style="display:inline-block;*display:inline;*zoom:1;border:1px solid blue;width:100px;height:100px;">div2</div>

[img]http://dl.iteye.com/upload/attachment/553215/63575b03-996d-32ae-a880-8b8c653a43b7.jpg[/img]
zoom:1 是为了触发IE6 7 下的hasLayout属性，主要用于盒子模型解析的时候，这样就可以设置他的宽度和高度了。

关于float，主要以前不理解在元素浮动之后元素的显示方式即display方式，当元素浮动之后元素的display属性就变为类似于inline-block，所以在行内元素浮动之后可以设置他的高度，宽度

<span style="float:left;border:1px solid red;width:100px;height:100px;">span1</span>
		<span style="float:left;border:1px solid blue;width:100px;height:100px;">span2</span>

[img]http://dl.iteye.com/upload/attachment/553224/cb0441d3-a84a-356b-9677-2b4d82090ac6.jpg[/img]