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

最新推荐文章于 2024-04-28 13:46:58 发布

Color20

最新推荐文章于 2024-04-28 13:46:58 发布

阅读量4.3k

点赞数

分类专栏：前端文章标签：开发语言前端

本文链接：https://blog.csdn.net/qq_63108921/article/details/124381383

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

清除浮动的含义是什么？

清除浮动带来的影响

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

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

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

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

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

优点：方便

Color20

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
1
评论
CSS清除浮动的方法（多种）

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

扫一扫