在使用CSS進(jìn)行布局設(shè)計(jì)時(shí)，我們經(jīng)常會(huì)遇到盒子塌陷的問(wèn)題。盒子塌陷指的是當(dāng)父元素的高度沒(méi)有指定或小于子元素高度時(shí)，子元素的高度會(huì)撐開父元素，在外面出現(xiàn)空白的情況。這在實(shí)際應(yīng)用中顯然是不利的。下面我們來(lái)介紹一些CSS技巧，幫助我們消除盒子塌陷。

1.使用浮動(dòng) float

.parent{
overflow: auto;
}
.child{
float: left;
}

2.使用絕對(duì)定位 absolute

.parent{
position: relative;
}
.child{
position: absolute;
}

3.使用Flexbox

.parent{
display: flex;
}

4.使用 Grid

.parent{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
}

通過(guò)以上四種方法，我們可以消除盒子塌陷問(wèn)題，使我們的布局更加美觀和完美。