「高度塌陷」是指父元素未設定高度和寬度，而且其只包含浮動的子元素時，該父元素的高度會產生「塌陷」.換言之，當元素不具有實際高度時，就會產生「高度塌陷」。
解決「高度塌陷」問題的方法有如下幾個：
1.在父元素結束前加乙個高度為0，寬度為0，且clear:both的div。當然如果有未浮動的子元素，可以直接clear:both。
塊1
塊2塊3
.left
.clear
說明：如果實際專案中父元素含有未浮動的子元素時，可以給未浮動的子元素加clear:both，就不需要在設定乙個高度和寬度為0的div
2.為父元素新增overflow:hidden屬性，相容ie6時需要再新增zoom:1
塊1
塊2塊3
.father
.left
塊1
塊2
.father
.father:after
.left
float布局 高度塌陷以及解決辦法
well，利用float浮動來實現多個塊元素橫向布局已經是習以為常的事情了，同時我相信許多剛剛接觸float元素或者甚至剛剛才入行的小夥伴們會遇到一系列的問題。例如這樣 這孩子真霸道 再比如這樣 坑爹！這是要鬧哪樣！這裡我只是簡單的總結一下而已，畢竟鄙人也是一枚剛跳進前端的偽小白，同時算是給一些前端...
解決float帶來的父元素高度塌陷問題
1.為父元素新增高度。缺陷 高度要隨子元素所有高度變化而變化 2.clear屬性。使用 在浮動元素的同級元素新增clear屬性。缺陷 新增了多餘標籤 3.為父元素新增overflow hidden zoom 1屬性。缺陷 overflow hidden 會自動擷取超出父元素寬度的內容 4.為父元素新...
float浮動造成高度塌陷的解決辦法
float 是我們在頁面布局中常用的，也是非常重要的乙個屬性，可以讓頁面布局變得更加靈活。但是在繼續學習之後，尤其是掌握了寬高自適應之後，我們常常會發現乙個奇怪的現象 如果父元素沒有設定高度，而子元素都浮動了的話，父元素就 癟 了。就像下面這樣 html head meta charset utf ...