高度塌陷的產生條件和解決方法

高度塌陷一般由浮動或者絕對或固定定位引起，定位引起的高度塌陷可以更換定位，這裡就不再累述了，這裡介紹下浮動引起的高度塌陷及解決辦法。

浮動除了會讓元素水平排列外，還會讓元素脫離文件，讓下面的元素頂上去，文字會環繞顯示，這就是高度塌陷。

.box

.box1,.box2,.box3

可以看到，如果父元素不設定高度父元素便會塌陷。下面介紹解決方法

方法一：給父元素設定高度；

問題解決。

優點：簡單直接

缺點：高度不能隨內容的高度進行自適應。

方法二：給父元素加overflow：hidden；zoom：1；

overflow：hidden；會觸發父元素為bfc；bfc中規定計算bfc高度時浮動元素參與計算；zoom：1是為了解決overflow：hidden在ie7及以下的相容問題；

優點：簡單且高度隨內容自適用；

缺點：容易和定位發生衝突；

方法三：給所有浮動元素的最後新增乙個空標籤，新增宣告clear：both；height：0；overflow：hidden；

="box"

>
="box1"
>
<
/div>
="box2"
>
<
/div>
="box3"
>
<
/div>
="clear"
>
<
/div>
<
/div>
="under"
>我是下面的元素<
clear:both；目的是清除浮動；
overflow：hidden；height：0；是解決部分容器在ie低版本上有預設高度的問題；
優點：比較方便，高度也隨內容自適應，也不會發生內容溢位隱藏
缺點：會造成大量冗餘**；
方法四：利用偽元素選擇器解決高度塌陷；
利用：after偽類選擇器清除浮動時候，基本語法為
塌陷元素：after
宣告 height: 0;overflow:hidden;為了避免ie相容問題；
宣告visibility: hidden;是隱藏content引號內的內容；
這種清除高度塌陷的方法又叫萬能清楚法，通常頁面開發的時候，會建立乙個公共類，方便產生高度塌陷的元素進行呼叫；
優點：都是優點
缺點：沒有缺點
其他不常用方法：
原理都是觸發父元素為bfc，和方法二相同；
1.給父元素新增浮動：會產生新的高度塌陷問題；
2.給父元素新增display：table；會影響自身功能；
3.overflow：auto/scroll；前者內容溢位會出現滾動條，後者直接出現滾動欄；
 
高度塌陷的產生條件和解決方法
高度塌陷的產生條件 父元素沒有設定高度，所有的子元素都浮動 父元素在文件流中高度預設是被子元素撐開的,當子元素脫離文件流以後,將無法撐起父元素的高度,也就會導致父元素的高度塌陷 高度塌陷的解決辦法 1.給父元素設定高度，此方法適合高度固定的布局 原理 父級div手動定義height，就解決了父級di...
頁面布局產生高度塌陷解決方法
給父級元素新增高度 優點 解決簡單 缺點 就不能做到寬高自適應了 在出現高度塌陷的父級元素設定overflow hidden 優點 可以解決高度塌陷並且能做到自適應，好理解 缺點 超出當前父級元素的盒子都會被隱藏掉 在最後乙個盒子新增標籤div，設定解決高度塌陷的樣式 預設樣式 clear both...
高度塌陷的產生原因及解決方法
當父元素未設定高度 時，所有子元素浮動後，造成 子元素脫離文件流進而無法把父元素撐開，父元素高度為0 產生高度塌陷 稱為高度塌陷問題。父元素高度塌陷後，父元素以下的元素都會向上移動，導致布局混亂，所以我們要解決高度塌陷的問題。如下 當我們讓div1和div浮動之後 我們可以發現，當子元素全都浮動後，...