優秀的你，才能遇到優秀的世界

為什么會產生高度坍塌：

父元素的高度默認是被子元素撐開的，也就是子元素多高，父元素就多高。
但是當為子元素設置浮動以后，子元素會完全脫離文檔流，此時將會導致子元素無法撐起父元素的高度，導致父元素的高度塌陷。

先上結論,清除浮動的方式：

1、給父元素添加overflow：hidden
2、在浮動元素下方添加空div，并給元素聲明 clear：both
3、使用after偽類選擇器清除浮動
4、父元素添加浮動
5、給父元素設定高度

一、父元素添加overflow：hidden

overflow：hidden是用于清除浮動的，本意就是把多余的部分隱藏，但是為什么隱藏之后父元素就不會出現高度坍塌呢
添加overflow：hidden原理其實是產生了BFC

1、BFC

什么是BFC：

BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何布局，并且與這個區域外部毫不相干。

怎么創建BFC：

1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible

BFC的作用：

1、避免margin重疊
2、自適應兩欄布局
3、清除浮動

從BFC的創建和作用中可以總結出：

overflow：hidden這個屬性創建了BFC BFC 又可以清除浮動 所以overflow：hidden可以清除浮動
了解大概主體之后，我們開始分析其原理

原理

上面說到沒有給父元素設置高度時。父元素的高度是被子元素撐開的，設置子元素浮動之后，在文檔流中就沒有了高度，所以父元素也沒有高度，導致高度坍塌
父元素觸動BFC之后，也脫離文檔流，（相當于包含浮動流），所以子元素的高度依然可以撐起父元素。

優缺點

優點：代碼少、簡單
缺點：1、只適用于高版本游覽器，IE6不支持。
2、不能和position定位配合使用，超出的尺寸會被隱藏

二、在底部加一個空元素

在底部加一個空元素并清除浮動
clear：both
這樣的話底部的這個空元素是沒有浮動的 能托起父元素的高度
但是一般不建議這樣使用 添加一個空元素可能會造成語義等其他問題

優點：代碼少，瀏覽器兼容好，只需要兼容 IE 瀏覽器，因為在IE兼容部分塊元素會自帶16px的高度，需要添加 height: 0;overflow: hidden;
缺點：需要添加多余的空標簽并添加屬性

三、使用偽類選擇器清除浮動

這個方法用的比較多，
在總結這點的時候，一直沒想明白，于是從什么是偽類選擇器開始入手，
偽元素: 在不動結構代碼的前提下,添加元素
偽類選擇器：選中這個實際不存在的元素，然后清除浮動之后回歸到文檔流，就撐起了父元素的高度，解決了高度坍塌
注： 由于IE6-7不支持:after，使用 zoom:1觸發 hasLayout

那么另外一個問題又來了

使用：before和：after 同時使用雙偽元素清除浮動有什么區別？
從語言上來講 ：before是在元素前加一個偽元素，：before是在元素后加一個偽元素，看上去好像沒有什么不同，
目前查看的資料博客沒有關于這個解釋的，等我會了在回來補。

四、給父元素設置成為浮動元素

這點也比較好理解，因為高度坍塌就是子元素脫離文檔流，父元素仍然在文檔流造成的，現在給父元素設置浮動 那么父元素也就自然包含了子元素，

缺點：會產生新的浮動問題 所以一般不適用，只是一個思路

五、給父元素設置高度

既然子元素沒有高度來撐起父元素，那么我們手動給父元素設置一個合適的高度就ok了
優點是代碼量少，好理解
缺點是需要手動計算父元素的高度 固定之后如果子元素發生改變還需單獨修改父元素的高度

總結

以上是生活随笔為你收集整理的CSS中几种解决高度坍塌方式分析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。