使用inline-block闭合浮动元素

更新时间：2007-12-17参与评论

最近在做的一个页面，闭合浮动元素的方法我大量使用了给一个div清除两端的属性，所以，页面源码有非常多的没有意义的div标签，而且在IE里，因为层叠的关系，出现了一些莫名其妙的错误，所以让我最终放弃这个闭合浮动的方法。

由于这个样式用在不同宽度的地方是自适应的，所以没有定义宽度。firefox好解决，而IE中为了要符合标准，所以放弃的zoom，又不能定义宽度，最后选择了display:inline-block。这个属性可以闭合浮动元素，触发layout属性。最后的定义是

.probox div{padding: 0px 0px 20px;margin: 20px 0px 13px;background-image: url(../images/line.gif);background-repeat: repeat-x;background-position: bottom;display:inline-block; overflow:auto;}
.probox div{display:block;}

为了减少代码的大小，所以是在一个父div.probox里定义很多相同的子div，div.probox里子div包含浮动的产品图片，所以先给子div一个display:inline-block，触发layout，然后再给它定义display:block，还原它的块级属性。overflow:auto是让它在firefox中闭合。

这个方法很好用，但当时知道这个方法的时候不太理解display:inline-block的意义，最近看了蓝色理想的一个关于inline-block的帖子，才发现它有很大的用途，IE中它可以让一个内联元素拥有块级元素的一些属性，但是firefox不支持这个写法，firefox中要写成display:-moz-inline-box !important。

更多关于display:inline-block的应用与说明会在我更深了解并实际应用以后再总结出来，这样貌似用不着浮动了。