HTML 清除浮动的四种方法

最新推荐文章于 2023-07-27 21:11:42 发布

shijialeya.

最新推荐文章于 2023-07-27 21:11:42 发布

阅读量593

点赞数

文章标签： html css

shijialeya

本文链接：https://blog.csdn.net/weixin_44496396/article/details/109721719

版权

额外标签法

原理：在父标签尾部添加一个块级标签，这个块级标签通过 clear: both; 设置不允许浮动来支撑父标签。

<!DOCTYPE html>
<html lang="ZH-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>额外标签法</title>
    <style>
        .father{
            padding: 5px;
            background-color: rgba(104, 33, 122, .3);
        }
        
        .son{
            float: left;
            width: 300px;
            height: 300px;
            background-color: rgba(44, 44, 44, .5);
        }
        
        .clear{
            /* ⭐ 在左右两侧均不允许浮动元素 */
            clear: both;
            border: 0;
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
        <!-- ⭐ 增加一个额外的块级标签，并且把该标签的 clear 的值设置为 both (标签左右两边不浮动) -->
        <div class="clear"></div>
    </div>
</body>
</html>

父元素法

原理：直接对父容器添加 overflow: hidden; 清除浮动。

<!DOCTYPE html>
<html lang="ZH-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父标签法</title>
    <style>
        .father{
            /* ⭐ 清除浮动 */
            overflow: hidden;
            padding: 5px;
            background-color: rgba(0, 122, 204, .3);
        }
        
        .son{
            float: left;
            width: 300px;
            height: 300px;
            background-color: rgba(44, 44, 44, .3);
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
        <div class="son"></div>
    </div>
</body>
</html>

单伪元素法

原理：给父标签添加一个尾部伪元素，伪元素内容为空，转换为块级元素，高度设置为零，清除左右浮动，并且将元素设置不可见来支撑父元素

<!DOCTYPE html>
<html lang="ZH-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单伪元素法</title>
    <style>
        .father{
            padding: 5px;
            background-color: rgba(0, 122, 204, .3);
        }
        
        .son{
            float: left;
            width: 300px;
            height: 300px;
            background-color: rgba(44, 44, 44, .3);
            border: 1px solid red;
        }
        
        /* ⭐ 伪元素：给父容器添加一个 after 伪元素，伪元素内容为空，转换为块级元素，高度设置为零，清除左右浮动，并且将元素设置不可见 */
        .clearfix::after{
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        
        .clearfix {
            /* IE6、7 专有 */
            *zoom: 1;
        }
    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="son"></div>
        <div class="son"></div>
    </div>
</body>
</html>

双伪元素法

原理：类似于单伪元素法，只不过双伪元素法是在父标签的头尾都加上了伪元素

<!DOCTYPE html>
<html lang="ZH-cn">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>双伪元素发</title>
        <style>
            .father {
                padding: 5px;
                background-color: rgba(0, 122, 204, .3);
            }

            .son {
                float: left;
                width: 300px;
                height: 300px;
                background-color: rgba(44, 44, 44, .3);
                border: 1px solid red;
            }

            /* ⭐ 伪元素：给父容器添加 before 和 after 伪元素，伪元素内容为空，设置为块级元素 */
            .clearfix::after,
            .clearfix::before {
                content: "";
                display: table;
                clear: both;
            }

            .clearfix {
                /* IE6、7 专有 */
                *zoom: 1;
            }
        </style>
    </head>

    <body>
        <div class="father clearfix">
            <div class="son"></div>
            <div class="son"></div>
        </div>
    </body>

</html>

shijialeya.

关注

0
点赞
踩
1

收藏

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

额外标签法原理：在父标签尾部添加一个块级标签，这个块级标签通过 clear: both; 设置不允许浮动来支撑父标签。<!DOCTYPE html><html lang="ZH-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>额
复制链接

扫一扫