可能的原因:
- 子元素使用了浮动,使得父元素的高度无法自适应子元素的高度。
- 子元素使用了绝对定位,使得父元素的高度无法自适应子元素的高度。
- 父元素使用了内部元素高度的百分比,但是没有设置父元素的高度值,导致父元素高度为0。
- 父元素使用的是行内元素,行高(line-height)导致了父元素高度为0。
解决方法:
- 清除浮动,可以使用clearfix清除浮动或给父元素添加overflow:hidden。
- 父元素设置为相对定位,子元素设置为绝对定位,再给父元素设置min-height: 1px;
- 父元素也要设置高度,或者使用flex盒子布局,或者使用grid布局。
- 父元素使用块级元素,或者给父元素设置height属性。