清除浮动的办法

最新推荐文章于 2024-07-31 14:35:30 发布

杜楠呀

最新推荐文章于 2024-07-31 14:35:30 发布

阅读量86

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_68142594/article/details/131769897

版权

1.为什么清除浮动

2.清除浮动常用的方法

(1)额外标签法

(2)单伪元素清除法

(3)双伪元素清除法

(4)overflow: hidden—BFC

1.为什么清除浮动

浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱），

清除浮动（清除浮动带来的影响）。

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 1200px;
            /* 未给父级设置高度，默认与子盒子一样宽 */
            background-color: pink;
            margin: 0 auto;
        }

        .box .little {
            float: left;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }

        .footer {
            width: 100%;
            height: 200px;
            background-color: red;
        }

    </style>
    </head>
    <body>
        <div class="box">
            <div class="little">小盒子</div>
        </div>
        <div class="footer">底部盒子</div>
    </body>

</html>

2.清除浮动常用的方法

(1)额外标签法

在父元素内容的最后添加一个块级元素，设置 CSS 属性 clear: both（不太推荐会增大代码的复杂程度 ）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 1200px;
            /* 未给父级设置高度，默认与子盒子一样宽 */
            background-color: pink;
            margin: 0 auto;
        }

        .box .little {
            float: left;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }

        .footer {
            width: 100%;
            height: 200px;
            background-color: red;
        }

        /* 清除浮动的代码 */
        .clearfix {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="little">小盒子</div>
        <!-- 额外标签法 不太推荐 会增大代码的复杂程度 -->
        <div class="clearfix"></div>
    </div>
    <div class="footer">底部盒子</div>
</body>

</html>

(2)单伪元素清除法

语法：

        /* 单伪元素清除法 */
        .clearfix::after {
            content: '';
            display: block;
            /* 清除浮动的代码 */
            clear: both;
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 1200px;
            /* 未给父级设置高度，默认与子盒子一样宽 */
            background-color: pink;
            margin: 0 auto;
        }

        .box .little {
            float: left;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }

        .footer {
            width: 100%;
            height: 200px;
            background-color: red;
        }


        /* 单伪元素清除法 */
        .clearfix::after {
            content: '';
            display: block;
            /* 清除浮动的代码 */
            clear: both;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="little">小盒子</div>
    </div>
    <div class="footer">底部盒子</div>
</body>

</html>

运行结果同上

(3)双伪元素清除法

语法：

        /* 双伪元素清除法  推荐使用 */
        .clearfix::before,
        .clearfix::after {
            content: '';
            display: table;
        }

        .clearfix::after {
            clear: both;
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 1200px;
            /* 未给父级设置高度，默认与子盒子一样宽 */
            background-color: pink;
            margin: 0 auto;
        }

        .box .little {
            float: left;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }

        .footer {
            width: 100%;
            height: 200px;
            background-color: red;
        }


        /* 双伪元素清除法  推荐使用 */
        .clearfix::before,
        .clearfix::after {
            content: '';
            display: table;
        }

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

<body>
    <div class="box clearfix">
        <div class="little">小盒子</div>
    </div>
    <div class="footer">底部盒子</div>
</body>

</html>

运行结果同上

(4)overflow: hidden

父元素添加 CSS 属性 overflow: hidden（溢出隐藏 BFC盒子,不会受到浮动的影响,独立存在于页面的盒子不会受到任何盒子的影响）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 1200px;
            /* 未给父级设置高度，默认与子盒子一样宽 */
            background-color: pink;
            margin: 0 auto;
            /* 溢出隐藏  BFC盒子,不会收到浮动的影响,独立存在于页面的盒子不会受到任何盒子的影响*/
            overflow: hidden;
        }

        .box .little {
            float: left;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }

        .footer {
            width: 100%;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box ">
        <div class="little">小盒子</div>
    </div>
    <div class="footer">底部盒子</div>
</body>

</html>

运行结果同上

BFC：块级格式化上下文——在页面单独存在一个独立区域盒子，不会受到标准流影响。