CSS高度塌陷問題與解決辦法

問題描述：

在文件流中，父元素預設被子元素撐開（父多高子多高），一旦子浮動，脫離文件流，父無撐起元素便塌陷，父下的所有元素會上移。

（不推薦）可以將父高度寫死避免塌陷，但高度寫死後，父高度不能自動適應子高度的變化。

1

doctype html
>
2<
html
>
3<
head
>
4<
meta 
charset
="utf-8"
/>
5<
title
>高度塌陷問題
title
>
6<
style 
type
="text/css"
>
7.father
10.son
17.duibi
22style
>
23head
>
24<
body
>
25<
div 
class
="father"
>
26<
div 
class
="son"
>
27div
>
28div
>
29<
div 
class
="duibi"
>
30div
>
31body
>
32html
>

解決方案一：

高度塌陷原因及其解決辦法

當父元素沒有新增高度 高度自適應 而子元素脫離文件流的時候 當子元素設定了float或者子元素的position屬性值為absolute或是fixed，都會脫離文件流 就會發生高度塌陷。設計原因 高度塌陷設計原理 en utf 8 viewport content width device widt...

float布局 高度塌陷以及解決辦法

well，利用float浮動來實現多個塊元素橫向布局已經是習以為常的事情了，同時我相信許多剛剛接觸float元素或者甚至剛剛才入行的小夥伴們會遇到一系列的問題。例如這樣 這孩子真霸道 再比如這樣 坑爹！這是要鬧哪樣！這裡我只是簡單的總結一下而已，畢竟鄙人也是一枚剛跳進前端的偽小白，同時算是給一些前端...

float浮動造成高度塌陷的解決辦法

float 是我們在頁面布局中常用的，也是非常重要的乙個屬性，可以讓頁面布局變得更加靈活。但是在繼續學習之後，尤其是掌握了寬高自適應之後，我們常常會發現乙個奇怪的現象 如果父元素沒有設定高度，而子元素都浮動了的話，父元素就 癟 了。就像下面這樣 html head meta charset utf ...