【前端】浮動後父容器高度自適應，浮動後父容器自適應

【前端】浮動後父容器高度自適應，浮動後父容器自適應

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應該沒人用了吧？)

本文作者：我是一個不太會講故事的人

新浪微博：我不管你姓什麼

微博地址：http://weibo.com/neveryu

郵箱：never@vip.qq.com

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。