在使用 CSS 進行布局時,往往會出現父元素高度塌陷的問題。造成這種問題的原因是子元素使用 float 屬性時,會使得子元素脫離文檔流,從而導致父元素無法計算高度。
為了避免這種問題,我們可以采用下面的方法來防止父元素高度塌陷:
父元素 { overflow: hidden; }
使用這種方法,父元素會創建一個 BFC(塊級格式化上下文),在 BFC 中,浮動元素的高度不會影響到父元素的高度,從而避免了高度塌陷的問題。
另外,我們還可以使用下面的方法來清除浮動:
.clearfix::after { content: ""; display: table; clear: both; }
這種方法可以在父元素中添加一個偽元素,偽元素會自動清除浮動,因此可以避免父元素高度塌陷的問題。
總之,在進行 CSS 布局時,我們需要注意父元素高度塌陷的問題,避免出現布局錯亂的情況。