CSS清除浮动的方法（多种）

清除浮动的含义是什么？清除浮动带来的影响影响：如果子元素浮动了，此时子元素不能撑开父元素➢ 清除浮动的目的是什么？需要父元素有高度，从而不影响其他网页元素的布局注意：父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置clear:both;/* 清除左右两侧浮动的影响 */方法：1、直接设置父元素高度优点：简单粗暴，方便缺点：有些布局中不能固定父元素高度。如：新闻

俺是灰太狼

4400人浏览 · 2022-04-24 14:17:32

俺是灰太狼 · 2022-04-24 14:17:32 发布

清除浮动的含义是什么？

清除浮动带来的影响

影响：如果子元素浮动了，此时子元素不能撑开父元素

➢ 清除浮动的目的是什么？

需要父元素有高度，从而不影响其他网页元素的布局

注意：父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置

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

优点：方便