Css基础部分:如何消除浮动带来的高度塌陷问题

在CSS中，"高度塌陷"通常是指当一个元素只包含浮动元素时，其高度会变为0。这是因为浮动元素会脱离正常的文档流，不会影响其父元素的高度。

消除高度塌陷的常用方法有以下几种：

1. 使用clear属性：在浮动元素后添加一个元素，并设置其clear属性为both。这会使得该元素下移，直到其顶部在所有前面的左浮动和右浮动元素下面。

2. 使用伪元素：在父元素中添加一个伪元素，并设置其clear属性为both。这种方法的优点是不需要添加额外的HTML元素。

3. 使用BFC（Block Formatting Context）：给父元素设置overflow属性为auto或hidden，或者设置display属性为flow-root，可以创建一个新的BFC，使得父元素能够包含浮动元素。

在你的代码中，你已经使用了伪元素的方法来消除高度塌陷：

<style type="text/css">
    .clearfix::after{
        display: block;
        height:0px;
        content: "";
        clear: both;
        visibility: hidden;
    }
</style>

这段代码的作用是在.clearfix元素的内容后添加一个块级元素，并设置其clear属性为both，使得.clearfix元素能够包含其内部的浮动元素，从而消除高度塌陷。