高度塌陷產生原因:
在浮動布局中，父元素的高度默認被子元素撐開，當子元素浮動后，其會完全脫離檔案流，子元素從檔案流中脫離將會無法撐起父元素的高度，導致父元素的高度丟失，
解決高度塌陷緣由:
由于高度塌陷會影響頁面中其他元素的布局(父元素塌陷后，其下面的元素將會自動上移)，將會導致頁面混亂，因此解決高度塌陷是不可逃避的問題，
解決辦法:
1.將父元素高度寫死，這樣可避免高度塌陷，但這樣也會讓父元素高度不再被子元素撐開，將會導致各種問題，因此這種方法不推薦，
2.開啟BFC
BFC(Block Formatting Context) 塊級格式化環境
BFC是一個CSS中的一個隱含屬性，可以為一個元素開啟BFC，開啟BFC該元素會變成一個獨立的布局區域，但開啟BFC后都會有或多或少的副作用，因此需要挑選一個副作用最小的方法來開啟，
關于元素開啟BFC后變成獨立布局區域的個人理解解釋：
可以將開啟BFC后的元素看成一個譬如html的大容器，此時其中的子元素便相對于父元素定位，此時設定外邊距便不會發生重疊問題，
元素開啟BFC后特點：
1.開啟BFC的元素不會被浮動元素所覆寫
2.開啟BFC的元素子元素和父元素外邊距不會重疊(關于外邊距重疊問題在后續博客會詳細解釋)
3.開啟BFC的元素可以包含浮動的子元素(解決高度塌陷）
這三個特點很重要，因此需要牢記并熟練運用
由于BFC是CSS中的隱含屬性可以理解為抽象存在的，所以不能對元素直接開啟，可以通過一些特殊方式來開啟元素的BFC：
1.設定元素的浮動(不推薦,高度塌陷解決，但是寬度跟隨消失)
2.將元素設定為行內塊元素(不推薦,高度塌陷解決，但是寬度跟隨消失)
3.將元素的overflow設定為一個非visible的值
- 常用方式：為元素設定 overflow: hidden 開啟其BFC 以使其可以包含浮動元素
當然這三個是常用的開啟BFC方式，更多開啟BFC的方式可自行查找.
下面介紹一個更厲害的方法
你可以在塌陷父元素的末尾設定一個偽元素after將內容設為空白，并設定為塊元素，同時用clear清除兄弟浮動元素帶來的影響，從而將父元素撐起，代碼如下:
div::after{
content:'';
dispay:block;
clear:both;
}
最后希望大家都能愛上費曼先生
這個演算法是以著名物理學家理查德·費曼命名的，其步驟如下：
(1) 將問題寫下來，
(2) 好好思考，
(3) 將答案寫下來，
——Aditya Bhargava《演算法圖解》
（只能說計算機科學家是一群不按常理出牌的人）
愿我們都能心想事成!!!
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/275808.html
標籤：其他
上一篇：HTML5基礎 下