CSS清除浮动使父级元素展开的三个方法

CSS清除浮动是指在父元素中使用一些属性或技巧，使得父元素正确地展示出所有子元素的高度，不被浮动元素的影响。下面将为大家分享三个常用的CSS清除浮动的方法。

1.使用clear属性清除浮动

clear属性可以清除元素的浮动。当某个元素需要在浮动元素下面展示，就可以在该元素中添加clear属性，并设置相应的值来实现。

示例：

.clear{
    clear:both;
}

• clear:both表示元素同时清除左右两侧的浮动。
• clear:left/right分别表示元素清除左浮动或右浮动。

在HTML中，将该元素添加至浮动元素后面即可实现。

2.使用overflow属性清除浮动

设置父元素的overflow属性为hidden，可以清除子元素的浮动，从而实现正确地展示所有内容的效果。

示例：

.container{
    overflow: hidden;
}

在HTML中，将浮动元素包裹在该父元素内即可实现。

3.使用伪元素清除浮动

使用伪元素:before或:after清除浮动，是一个比较神奇的方法。在父元素之后添加一个伪元素，该伪元素清除浮动。需要注意的是，该方法需要给父元素设置position属性。

示例：

.container{
    position: relative;
}
.container:after{
    content: '';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}

在HTML中，将浮动元素包裹在该父元素内即可实现。

以上三种方法均可实现清除浮动，不同的方法可根据实际应用情况进行选择。