在CSS中,給盒子清高即是讓包裹盒子的父元素的高度等于盒子的高度。這樣在包裹盒子的布局中才能正確地計算出盒子的位置。
下面介紹一些CSS的方法來給盒子清高:
方法一:使用浮動
當我們將一個盒子設置為浮動時,它的高度不會撐起它的父元素。此時,我們可以使用clearfix來清除父元素的高度。
.clearfix::after { content: ''; display: table; clear: both; }
在盒子的父元素上加上clearfix類名即可清高。
方法二:使用彈性盒子
在CSS3中,我們可以使用彈性盒子布局來清高。將包裹盒子的父元素設置為彈性容器,并將其子元素(即盒子)的高度設置為100%即可。
.parent { display: flex; flex-direction: column; } .child { height: 100%; }
以上兩種方法都可以讓包裹盒子的父元素的高度等于盒子的高度,并且清高的效果都很好。選擇哪一種方法視情況而定。
下一篇css怎么自適應縮放