浮動塌陷概念：
1，在文件流中，父元素的高度是預設被子元素撐開的。也就是說子元素多高父元素多高。
2，但是當為子元素設定為浮動是，子元素會完全脫離文件流，此時會導致子元素無法撐開父元素高度，導致父元素高度塌陷。
3，由於父元素高塌陷，則父元素下的所有元素便都會向上移，導致布局混亂。
解決塌陷的方法：
1，為浮動元素的上級（即所說的父元素）新增高度
***：父元素無法自適應子元素的高度。
2，bfc(black formatting context):塊級格式化上下文
概念：根據w3c的標準，在頁面中元素都存在乙個隱藏屬性即（bfc），該屬性可以開啟或者關閉，預設為關閉。
開啟bfc特徵：
（1）父元素的垂直外邊距不會和子元素重疊
（2）開啟bfc的元素不會被浮動元素所覆蓋
（3）開啟bfc的元素可以包含浮動的子元素
開啟bfc特徵的方法：
（1）設定元素浮動
（2）設定元素絕對定位
-----------設定這兩種方式開啟，雖然可以撐開父元素，但會導致父元素的寬度丟失，而且這種方式會導致下邊的元素上移，不能解決問題
（3）設定元素為inline-block
-----------可以解決問題，但會導致寬度，不推薦使用。
（4）將元素的overflow設定為乙個非visible的值
------------推薦方式：將overflow的值設定為hidden是***最小開啟bfc的方式
弊端：不適用於ie6及以下瀏覽器，不支援bfc。
相容方法：zoom：1；隱藏屬性：（haslayout）
3 ，clear：both（清除對其影響最大的浮動元素）
清除左右浮動，會導致兩個div之間的margin值失效，多用於兄弟元素。
4，隔牆法：
在中間乙個空盒子，然後給那個空盒子clear：both；這樣加了一堵牆之後，第二個div就能掉下來並且不干擾了上面的元素。而且第二個div還是能通過magin-top調節兩個div（「牆體」div不要算進去）之間的間距，所以隔牆法作為乙個新的套路沿傳開來。
5，隔牆法進化版—內牆法
使用偽類選擇器：after
.clearfix:after
/*相容ie6*/.clearfix
/*使用屬性選擇器進行選擇清除塌陷的元素*/
web前端 解決因為浮動而引發的父元素塌陷問題
父元素因為浮動塌陷問題解決方法 注 清除浮動為 clear both left right。不會使得浮動的元素特性消失，只會作用於受到浮動影響的其他元素。1 給父元素設定高度 有侷限性 1 給父元素設定高度 height 200px 2 外牆法 不能撐開父元素 2 讓外牆清除父元素的浮動 outer...
web 前端歷程（2）浮動與清除浮動
web 前端歷程 2 浮動與清除浮動 簡單的來看，這裡的 layout div是無法顯示出背景黃色屬性的 原因 子元素left和right是直接浮動的，這時脫離了普通的文件流，進而無法直接的撐起父級元素的高度 即認為父級元素塌陷！所以要撐起來呀 type text css body layout l...
CSS 浮動和高度塌陷
溢位文字為省略號 p 溢位文字兩行之後為省略號 p 文字 數字的字串兩行之後為省略號 p 1 相鄰塊元素垂直外邊距的合併當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin bottom，下面的元素有上外邊距margin top，則他們之間的垂直距離不是margin bottom與ma...