css解决浮动导致父元素高度坍塌的几种方法

当子元素设置了浮动属性时，会导致父元素无法被浮动元素撑开，产生高度坍塌问题。解决这个问题的方法主要有以下几种：

1. 清除浮动

清除浮动可以让父元素获取包含子元素浮动元素的高度，使其高度被正确计算。可通过以下方式来实现：

1.1 清除浮动的常用方式——使用clearfix

clearfix是一种清除浮动的技术，它通过在父元素上设置一个伪元素，并对该伪元素设置clearfix类，利用clearfix类的样式设置来清除子元素的浮动。清除浮动的代码如下：

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

清除浮动后，父元素的高度将会被正确计算，不再出现高度坍塌的问题。

1.2 使用overflow

使用overflow属性也可以解决高度坍塌的问题，将父元素的overflow属性设为hidden等其他值，就能避免高度坍塌的问题。但是，需要注意的是，这种方法会对子元素的溢出内容进行裁剪，所以在使用时需注意。

.container {
    overflow: hidden;
}

2. 父元素同样浮动

在父元素设置和子元素相同的浮动方式也能解决高度坍塌的问题。这一做法下的父元素会跟随子元素的浮动。

.container {
    float: left;
}

通过在父元素上设置相同的浮动方式和子元素，可以让父元素跟随子元素的浮动，从而避免高度坍塌的问题。

以上就是通过清除浮动和父元素跟随子元素浮动这两种方式来解决高度坍塌问题的攻略。