float:left;

overflow：hidden;

当一个容器内元素都浮动后，它将高度将不会随着内部元素高度的添加而添加，所以造成内容元素的显示超出了容器。

在我们没有为容器设置高度的时候，容器的高度是自适应的。然而，当容器中的元素都浮动以后，脱离了文档流。容器的高度因为自适应的原因就为0了。

为了方便大家观察，我为父容器设置了边框。内间距。原本上面四张图片是在上面的容器中的。将图片设置左浮动以后，容器的高度就为0了。

Q1：这会为我们带来什么影响？

A1：浏览器在解析下一个容器的时候，默认是接着上一个容器的。

这样就会与图片有重叠部分，这样显然非常糟糕。

那么，怎样解决这样的问题呢？

A1：我们能够设置父容器的高度。

height:200px;

A2：我们能够用非常多换行符来撑起这个父容器。<br/><br/><br/>

第一种方法的可扩展性不好，大家都懂的，固定了高度以后，就比較死板了。

另外一种方法逼格比較低，大家都懂的，并且意义也不大。(只是我曾经经经常使用。挺爽的)

所以。就有了以下的这一种方法：

overflow:auto; zoom:1;

overflow:auto;是让高度自适应， zoom:1;是为了兼容IE6而写（此样式不能通过W3C验证）。

这就是所谓的css hack，因为不同的浏览器，比方IE 6,IE 7,IE8,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所须要的页面效果。

这个时候我们就须要针对不同的浏览器去写不同的CSS。让它可以同一时候兼容不同的浏览器。能在不同的浏览器中也能得到我们想要的页面效果。 这个针对不同的浏览器写不同的CSS code的过程。就叫CSS hack。

这里的overflow:auto; zoom:1;就是所谓的css hack，这样的形式是应用我们经常使用的代码来解决不兼容问题，也会用到加入一些特殊符号的形式，它本身没有意义，仅仅是针对不同浏览器是否对它识别来实现的。

另外补充一个IE6双倍边距的问题.大家假设遇到了，就用display：inline;(如今IE6应该没人用了吧？)

-------------------------------------------------------------------------------

原文地址：https://neveryu.github.io/guestbook/

Github: https://github.com/Neveryu

新浪微博：http://weibo.com/Neveryu