清除浮动的四种方式

陈书剑

已于 2022-03-07 16:39:44 修改

阅读量198

点赞数 1

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

于 2022-03-07 16:30:14 首次发布

本文链接：https://blog.csdn.net/m0_62657031/article/details/123332922

版权

Css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了四种常见的CSS清除浮动的方法，包括设置固定高度、添加空div、使用overflow:hidden和使用伪元素清除。这些方法旨在解决因子元素浮动导致的父元素高度塌陷问题，确保页面布局的正常显示。通过示例代码详细展示了每种方法的实现方式。

摘要由CSDN通过智能技术生成

源代码

<style>
        *{
            margin: 0;
        }
        #father{
            border: 1px dashed black;
        }
        div div{
            width: 100px;
            height: 50px;
            border: 1px solid black;
            background-color: red;
            display: inline-block;
        }
        .layer1{
            float: left;
        }
        .layer2{
            float: left;
        }
        .layer3{
            float: right;
        }
        .layer4{
            float: right;
        }
    </style>
</head>
<body>
    <div id="father">
        <div class="layer1"></div>
        <div class="layer2"></div>
        <div class="layer3"></div>
        <div class="layer4"></div>
    </div>
</body>

没有清除浮动的效果(父元素坍塌了)

第一种清除浮动的方法

给父元素增加一个height，元素有了固定的高度就会被限制

#father{
            height: 300px;
        }

第二种清除浮动的方法

在所浮动的盒子下添加一个空的div，给它设置一个清除浮动(不推荐使用,代码中尽量避免空的div)

.clear{
            clear: both;    //清除两侧浮动
        }

<div class="clear"></div>

第三种清除浮动的方法

在父元素增加一个overflow：hidden属性(下拉场景避免使用)

#father{
    overflow: hidden;
}

第四种清除浮动的方法

给父元素添加一个伪类(主流的清除浮动的方法，推荐使用，没有副作用)

content的引号里尽量不要有空格

#father::after{
            content: '';
            display: block;
            clear: both;
        }

清除浮动的效果

如果对您起到了作用，可否点个赞

陈书剑

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录