HTML中CSS清除浮动的方法总结
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;
}本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021 年 12 月，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
