大家可以使用一个被称为“Clearfix”的技术来实现。Clearfix是用于解决浮动(float)元素导致父元素高度塌陷的问题的一个技术。
下面是一段示例代码:
.parent { /* 触发 BFC(Box Formatting Context) */ overflow: hidden; } .child { float: left; }
在这段代码中,大家给父级元素添加了一个overflow: hidden;属性。这个属性可以触发BFC(Box Formatting Context),使得父级元素具有自己的格式化上下文。
接下来,大家给子级元素添加了一个float: left;属性,使得子级元素浮动。
这样做的结果是父级元素会根据子级元素的高度来自适应高度。这是因为在 BFC 中,浮动元素高度的计算会包含其所有子级元素的高度。
需要注意的是,这个方法只适用于子级元素都是浮动的情况。如果子级元素有定位或者内联元素等情况,可能会需要额外的处理。