CSS清除浮动（详细）

是阿花y

已于 2024-03-15 12:53:14 修改

阅读量196

点赞数 3

分类专栏：前端 CSS 文章标签： html 前端 css

于 2023-09-07 00:04:48 首次发布

本文链接：https://blog.csdn.net/2201_75935630/article/details/132725906

版权

前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

为什么要清除浮动？

因为很多场景中，父级元素是不能设置高度的，而子级元素又需要设置浮动，这样就会影响到后面的标准流元素

若下图所示：

解决方法：

1.额外标签法

代码示例：

（1）在父级元素内容的最后添加一个块级元素

<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <!--1.在父级元素内容最后添加一个块级元素  -->
        <div class="clearfix"></div>
    </div>
    <div class="bq"></div>
</body>

（2）在添加的块级元素设置属性clear:both

.clearfix {
            /* 给添加的块级元素设置clear:both */
            clear: both;
           }

2.单伪元素清除法

注意： 补充写法是为了兼容版本更低的浏览器，正常高版本浏览器不需要写

代码示例：

        /* 单伪元素清除浮动 */
        .clearfix::after {
            content: '';
            /* 转换为块级元素 */
            display: block;
            /* 清除浮动 */
            clear: both;
            /* 补充代码：在网页中不显示伪元素 */
            height: 0;
            visibility: hidden;
        }

        /* 兼容IE6、7 */
        .clearfix {
            *zoom: 1;
        }

结构代码：

<body>
    <!-- 单伪元素给父元素添加 -->
    <div class="father clearfix">
        <!-- 子元素浮动 -->
        <div class="damao"></div>
        <div class="ermao"></div>
        <div class="sanmao"></div>
    </div>

    <!-- 标准流元素 -->
    <div class="box"></div>
</body>

3.双伪元素清除法 （工作中真正使用到的清除浮动方法）

代码示例：

 /* 2.双伪元素清除浮动 */
        /* 添加 .clearfix::before 是为了解决外边距塌陷 */
        .clearfix::before,
        .clearfix::after {
            content: '';
        /* 转换为表格显示模式 */
            display: table;
        }
        /* 清除浮动 */
        .clearfix::after {
            clear: both;
        }

4.overflow:hidden 最方便的解决方法

代码示例：

.box {
            /* 版心居中 */
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;

            /* 清除浮动,直接给父元素设置 */
            overflow: hidden;
        }

总结：

一、清除浮动的必要因素

父元素没有设置高度，父元素内的子元素设置了浮动

二、清除浮动的方法，除了额外标签法， 其余都是给父元素添加类名

三、工作中最常用的方法是 双伪元素清除法

是阿花y

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS清除浮动（详细）

父元素没有设置高度，父元素内的子元素设置了浮动。1.在父级元素内容的最后添加一个块级元素。这样就会影响到后面的标准流元素。2.在添加的块级元素设置属性。父级元素是不能设置高度的。而子级元素又需要设置浮动。
复制链接

扫一扫