當父元素沒有新增高度（高度自適應），而子元素脫離文件流的時候（當子元素設定了float或者子元素的position屬性值為absolute或是fixed，都會脫離文件流），就會發生高度塌陷。
設計原因：高度塌陷設計原理
"en">
"utf-8">
"viewport" content="width=device-width, initial-scale=1.0">
document
.box
.box1
class="box">
class="box1">
.box.boxdiv父元素:after.boxfloat布局 高度塌陷以及解決辦法
well，利用float浮動來實現多個塊元素橫向布局已經是習以為常的事情了，同時我相信許多剛剛接觸float元素或者甚至剛剛才入行的小夥伴們會遇到一系列的問題。例如這樣 這孩子真霸道 再比如這樣 坑爹！這是要鬧哪樣！這裡我只是簡單的總結一下而已，畢竟鄙人也是一枚剛跳進前端的偽小白，同時算是給一些前端...
CSS高度塌陷問題與解決辦法
問題描述 在文件流中，父元素預設被子元素撐開 父多高子多高 一旦子浮動，脫離文件流，父無撐起元素便塌陷，父下的所有元素會上移。不推薦 可以將父高度寫死避免塌陷，但高度寫死後，父高度不能自動適應子高度的變化。1 doctype html 2 html 3 head 4 meta charset utf...
float浮動造成高度塌陷的解決辦法
float 是我們在頁面布局中常用的，也是非常重要的乙個屬性，可以讓頁面布局變得更加靈活。但是在繼續學習之後，尤其是掌握了寬高自適應之後，我們常常會發現乙個奇怪的現象 如果父元素沒有設定高度，而子元素都浮動了的話，父元素就 癟 了。就像下面這樣 html head meta charset utf ...