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;
}