【前端】浮动后父容器高度自适应

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

 

更多学习资源请私信我的新浪微博...