css 清除浮动的三种方式

最新推荐文章于 2024-05-01 14:11:26 发布

admin⁠

最新推荐文章于 2024-05-01 14:11:26 发布

阅读量55

点赞数

分类专栏：前端文章标签： html css js css3 jquery

本文链接：https://blog.csdn.net/qq_19598963/article/details/118654428

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第一种

使用 overflow：hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        main {
            width: 500px;
            border: 2px solid black;
            margin: 150px auto;
            padding: 10px;
            overflow: hidden;
        }
        main div {
            margin: 0 10px;
        }
        main div:nth-child(1) {
            width: 200px;
            height: 150px;
            border: 2px solid black;
            float: left;
        }
        main div:nth-child(2) {
            width: 200px;
            height: 150px;
            border: 2px solid black;
            background: wheat;
            float: right;
        }

    </style>


</head>
<body>
    <main>
        <div></div>
        <div></div>
    </main>
</body>
</html>

第二种

使用 after 伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        main {
            width: 500px;
            border: 2px solid black;
            margin: 150px auto;
            padding: 10px;
        }
        
        main:after{
            content: '';
            display: block;
            clear: both;
        }
        main div {
            margin: 0 10px;
        }
        main div:nth-child(1) {
            width: 200px;
            height: 150px;
            border: 2px solid black;
            float: left;
        }
        main div:nth-child(2) {
            width: 200px;
            height: 150px;
            border: 2px solid black;
            background: wheat;
            float: right;
        }

    </style>


</head>
<body>
    <main>
        <div></div>
        <div></div>
    </main>
</body>
</html>

第三种

增加一个空元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        main {
            width: 500px;
            border: 2px solid black;
            margin: 150px auto;
            padding: 10px;
        }
        
        main:after{
            content: '';
            display: block;
            clear: both;
        }
        main div {
            margin: 0 10px;
        }
        main div:nth-child(1) {
            width: 200px;
            height: 150px;
            border: 2px solid black;
            float: left;
        }
        main div:nth-child(2) {
            width: 200px;
            height: 150px;
            border: 2px solid black;
            background: wheat;
            float: right;
        }

        
        .clearfix{
            clear: both;
        }
    </style>


</head>
<body>
    <main>
        <div></div>
        <div></div>
        <div class="clearfix"></div>
    </main>
</body>
</html>

admin⁠

关注

0
点赞
踩
0

收藏

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

第一种使用 overflow：hidden<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> main { width: 500px; border: 2px solid black;
复制链接

扫一扫