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
