1.直接设置父元素的高度

优点： 简单粗暴、方便。

缺点： 有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块等。

2.额外标签法

操作：

1. 在父元素内容的最后添加一个块级元素
2. 给添加的块级元素设置clear：both

缺点： 会在页面中添加额外的标签，会让页面的HTML结构变得复杂。

3.单伪元素清除法

操作： 用伪元素替代了额外标签。

基本写法：

复制
.father::after {
    display: block;
    content: '';
    clear: both;
}

补充写法：

复制
.clearfix::after {
    display: block;
    content: '';
    clear: both;
    /* 补充代码，在网页中看不懂伪元素 */ 
    height: 0;
    visibility: hidden;
}

特点： 项目中使用，直接给标签加类即可！

4.双伪元素清除法

固定写法：

复制
.clearfix::before, .clearfix::after {
    content: '';
    display: table;
}
 
.clearfix::after {
    clear: both;
}

特点： 项目中使用，直接给标签加类即可，after用于清除浮动，before可以解决父元素塌陷问题。

5.给父元素设置overflow:hidden

操作： 直接给父元素设置 overflow:hidden

复制
.father {
    overflow: hidden;
    width: 400px;
    background-color: pink;
}