[分享]css中float之后有多余空间

CSS中的float属性可以让元素进行浮动定位，此时元素会跳出文本流脱离原来的位置，如果设置了多个元素的float属性，它们会像浮动在水中的气泡一样排列在一起。然而，在使用float属性时，会经常遇到...

CSS中的float属性可以让元素进行浮动定位，此时元素会跳出文本流脱离原来的位置，如果设置了多个元素的float属性，它们会像浮动在水中的气泡一样排列在一起。

然而，在使用float属性时，会经常遇到一个问题，就是元素float后，其父元素会出现多余的空白，即便子元素是完全包裹在父元素内部的。这是由于父元素的高度没有自适应调整，可通过以下几种方式来消除这种情况：

.container{
   overflow: hidden; /*1.添加overflow属性*/
}

.container{
   display: table; /*2.将父元素设置为display: table*/
}

.clearfix::after{
    content:""; /*3.使用清除浮动的技巧*/
    display:block;
    height:0;
    clear:both;
} 

以上代码分别使用了三种方式来消除float后的多余空间问题。其中，添加overflow属性能够让父元素自动调整高度，display: table则是将父元素转变为一个表格，使其自动调整高度。最后一种则是使用了清除浮动的技巧，即在父元素中添加一个伪类元素after，来清除浮动引起的影响。

需要注意的是，上述方式只是三种解决方案中的一部分，具体使用时需要根据实际情况来选择，并结合其他CSS样式一同使用。