什么是浮動？
通俗點講：就是父級元素沒有高度，導致產生高度塌陷問題，
什么時候會產生浮動問題？
當給元素設定float之后,元素脫離檔案流,父元素沒有設定height,造成高度的塌陷，
定位產生的父元素高度塌陷問題？
從這個可以看出并不是只有元素浮動才會使元素脫離檔案流造成高度塌陷問題，絕對定位也會造成父元素高度塌陷，
首先說一說如何解決絕對定位產生的父元素高度塌陷問題？
目前小編只發現二種可以解決的方法：
第一種方法：
直接給父元素高度；
缺點： 只適合高度固定的布局，
第二種方法：
利用JavaScript先獲取到絕對定位子元素的高度，在將其賦值給父元素；
缺點： 操作麻煩，對新手不友好，（歡迎大佬補充）
之后我們在來聊一聊解決float浮動引起的父元素高度塌陷的問題？
在這里咱們只說常見的，好用的解決方法：
第一種方法：
和解決絕對定位的方法一樣，直接給父元素高度；
缺點： 還是只適合高度固定的布局，其余不推薦使用，
第二種方法：
給父元素的after偽類；
.father::after { content: ""; clear: both; display: block; }
先了解一下clear：both;該屬性的值指出了不允許有浮動物件的邊情況,其實我們相當于在父元素底部添加了一個空的div，給空div clear：both屬性，讓這個空div把盒子撐開了，但是由于這樣寫會對一個專案出現很多的空div讓頁面結構混亂，這讓我們想起可以利用::after的偽元素解決創建空div的尷尬，
缺點： 代碼多，不利于新手理解，
第三種方法：
直接給父元素添加css：overflow: hidden;
原理太抽象了，故不在此做出宣告，大家可以自行百度(BFC)了解，
缺點： 可能出現想不到的問題，玄學，
祝大家學習快樂！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/255909.html
標籤：其他
下一篇：Js+Map實作兩數之和