html float菜鸟,菜鸟玩CSS的float（漂移哦）

前几天给mark做个网页，在页面内让图片放在div里，然后让div横排，每行3个，递增后自动换行，说起来有点不清楚，其实就是一个float:left;，为防止图片大小不一变形，我在css里限制了图片的宽度，这就算搞定了。

可是mark同学在使用的过程中发现，其他所有的图片都规规矩矩的排排坐、吃果果，就一张图特立独行的自己一行，问我什么情况。我研究半天，怎么删啊改啊，不管是什么浏览器啊，都是那样，就是没看出什么问题在哪里来，一下纳闷了。

后来不经意发现，那个特例独行的图片所在的div居然比其他所有的div高出1px，再认真看了下图片，原来图片大了1px，硬是将这个div给挤出其他所有规矩的div的行列。找到问题自然好解决，在上面限定图片宽度的基础上，再限定了图片的高度，高度一统一问题就解决了。当然，如果图片不是按比例的，会因为被限制了高度和宽度而拉伸扭曲，不过这也没办法，为了防止有人冒泡，只能这样了。

以往float:left;的时候最多的都是li，li 一般都是套着链接a，所以从没有遇到高度不齐的时候，也就从没有发现有float系列里突然跑出个独立一行的情况，突然冒出这个问题来，还真找了大半天。

另外，float的时候ie下margin的距离会比其他浏览器大，这时候用display:inline;，就能解决这个问题，或者用padding代替。

另另外，float的时候ie下，外面的div会套不住里面float了的div，收缩成一条线，这时候用overflow:hidden;_zoom:1;，就能解决问题，或者干脆指定外面div的高度，这样也跑不了。

IE6的情绪不好照顾。

作者： LMS

天行贱，君子自强自息。查看LMS的所有文章