高度塌陷情景

所謂高度塌陷是指在子父元素中，父元素未設置寬高，當子元素設置浮動后，父元素的高度不能被子元素撐開，出現高度塌陷。如下圖所示

當出現上述情況時，我們可以給父元素開啟BFC，解決高度塌陷問題。

BFC的定義：頁面中的元素都存在一個屬性，這個屬性稱為：Block Formatting Content 簡稱BFC

作用：這個屬性可以開啟或關閉。可以解決元素因外邊距或者浮動產生的問題。

下面這段代碼我們主要來使用BFC解決高度塌陷問題。

<style>.out{border: 1px solid #000;/* 父元素開啟BFC 可以包含浮動的子元素 */overflow: hidden;}.in{float: left;width: 100px;height: 100px;background-color: skyblue;}</style> <div class="out"><div class="in"></div> </div>

?由上結果圖可以看出，當我們設置給父元素開啟BFC，則當子元素浮動后，父元素不會出現高度塌陷問題。

總結

以上是生活随笔為你收集整理的BFC解决高度塌陷的全部內容，希望文章能夠幫你解決所遇到的問題。

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