清除浮动的4种方法

最新推荐文章于 2022-03-08 23:20:22 发布

freekale

最新推荐文章于 2022-03-08 23:20:22 发布

阅读量70

点赞数

文章标签： css

本文链接：https://blog.csdn.net/m0_53210865/article/details/118943692

版权

1.额外标签法（隔墙法）

2.父级overflow：hidden；

3.父级after伪元素

4.父级双伪元素

清除浮动后加外边框会撑大盒子

额外标签法

位于浮动下面的盒子添加clear：both/left/right；清除浮动

添加clear：both；前

    <style>
        .box {
            background: gray;
        }

        .a {
            height: 100px;
            width: 100px;
           
            background: pink;
            float: left;
            border: blue 2px solid;   /* 边框 */
        }

        .b {
            height: 200px;
            width: 100px;
            background: skyblue; border: red;
            /* clear: both;                 清除浮动 */
            border: solid 5px black;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="a"></div>
        <div class="b"></div>
    </div>

添加clear：both；后

    <style>
        .box {
            background: gray;
        }

        .a {
            height: 100px;
            width: 100px;
           
            background: pink;
            float: left;
            border: blue 2px solid;   /* 边框 */
        }

        .b {
            height: 200px;
            width: 100px;
            background: skyblue; border: red;
            clear: both;                 /*清除浮动*/
            border: solid 5px black;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="a"></div>
        <div class="b"></div>
    </div>
</body>

2.父级overflow：hidden；

父级元素添加前

    <style>
        .box {

            background: yellow;
        }
        .a {
            height: 100px;
            width: 100px;
            background-color: black;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="a">
        </div>
    </div>

父级元素添加后

    <style>
        .box {
            overflow: hidden; /*为父级元素添加 overflow: hidden; */
            background: yellow;
        }
        .a {
            height: 100px;
            width: 100px;
            background-color: black;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="a"></div>
    </div>

注意：为父级元素添加overflow：hidden后，浮动后面的元素依旧会跑到浮动的下面

为父级元素添加overflow：hidden只解决了浮动不会撑大父盒子的问题。

3.父级after伪元素

        .clearfix::after {                   /*给父元素添加伪元素：：after清除浮动*/
            content: "";            /*必须写的属性*/
            display: block;         /*转化为块级元素*/
            height: 0;              /*盒子高度为0*/
            clear: both;            /*清除浮动*/
            visibility: hidden;     /*隐藏文字*/
        }

用的时候可以直接复制

同overflow：hidden一样只解决了浮动不会撑大父盒子的问题，浮动后面的元素依旧会跑到浮动的下面。

4.父级双伪元素

.clearfix:before,.clearfix:after {
 
content:"";
 
display:table;
}
.clearfix:after {
 
clear:both;
}
.clearfix {
 
*zoom:1;
}

freekale

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
清除浮动的4种方法

1.额外标签法（隔墙法）2.父级overflow：hidden；3.父级after伪元素4.父级双伪元素额外标签法位于浮动下面的盒子添加clear：both/left/right；删除浮动
复制链接

扫一扫

清除浮动的4种方法

额外标签法

2.父级overflow：hidden；

3.父级after伪元素

4.父级双伪元素

“相关推荐”对你有帮助么？