清除浮动的含义是什么？
清除浮动带来的影响
影响：如果子元素浮动了，此时子元素不能撑开父元素
➢ 清除浮动的目的是什么？
需要父元素有高度，从而不影响其他网页元素的布局
注意：父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置
clear:both;/* 清除左右两侧浮动的影响 */
方法：
1、直接设置父元素高度
优点：简单粗暴，方便
缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块
2、额外标签法
操作： 1. 在父元素内容的最后添加一个块级元素 2. 给添加的块级元素设置 clear:both
缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂
3、单伪元素清除法
操作：用伪元素替代了额外标签
基本写法
.clearfix::after{
content:'';
display:block;
clear:both;
}
补充写法
/* 伪元素添加的标签是行内, 要求块 */
.clearfix::after{
content:'';
/* 伪元素添加的标签是行内, 要求块 */
display:block;
clear:both;
/* 补充代码：在网页中看不到伪元素 *//* 为了兼容性 */
height:0;
visibility:hidden;
}
优点：项目中使用，直接给标签加类即可清除浮动
4、双伪元素清除法
操作：
/* .clearfix::before 作用: 解决外边距塌陷问题
外边距塌陷: 父子标签, 都是块级, 子级加margin会影响父级的位置
*/
/* 清除浮动 */
.clearfix::bofore,
.clearfix::after{
content:'';
display:table;
}
/* 真正清除浮动的标签 */
.clearfix::after{
clear:both;
}
优点：项目中使用，直接给标签加类即可清除浮动
5、给父元素设置overflow : hidden
操作： 直接给父元素设置 overflow : hidden
优点：方便
————————————————
版权声明：本文为CSDN博主「俺是灰太狼」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_63108921/article/details/124381383