清除浮动的五种方法

最新推荐文章于 2022-12-14 14:00:54 发布

Bian_Zhuang

最新推荐文章于 2022-12-14 14:00:54 发布

阅读量239

点赞数

文章标签： css

本文链接：https://blog.csdn.net/Bian_Zhuang/article/details/121407394

版权

Why?

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题

How:

一、直接给父元素设置高度

<!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;
        }
        .father{
            width: 300px;
            /* 清除浮动:  直接给父元素加宽度 简单粗暴 */
            height: 300px;
            background: orange;
        }
        .son{
            width: 100px;
            height: 300px;
            background: greenyellow;
            float: left;
        }
    </style>
</head>
<body>
    <div class="father">
        Father
        <div class="son">Son</div>
    </div>
</body>
</html>

以下代码运行结果均为此图: 在这里插入图片描述

二、额外标签法(在最后一个浮动标签后，新加一个空标签，给其设置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>
        .father{
            width: 300px;
            background: orange;
        }
        .son{
            width: 100px;
            height: 300px;
            background: greenyellow;
            /* 左浮动 */
            float: left;
        }
        /* 清除浮动 给末尾加一个空标签 设置 clear: both;*/
        .clearfix{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="father">
        Father
        <div class="son">Son</div>
        <!-- 清除浮动 额外标签法 -->
        <div class="clearfix"></div>
    </div>
</body>
</html>

三、单伪元素清除浮动

<!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>
        .father{
            width: 300px;
            background: orange;
        }
        .son{
            width: 100px;
            height: 300px;
            background: greenyellow;
            float: left;
        }
        /* 单伪元素清除浮动 */
        .clearfix::after{
            content: "";
            display: block;
            clear: both;
            /* 补充代码 网页中看不到伪元素 */
            height: 0;
            visibility: hidden;

        }
    </style>
</head>
<body>
    <div class="father clearfix">
        Father
        <div class="son">Son</div>
    </div>
</body>
</html>

四、双伪元素清除浮动

<!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>
        .father{
            width: 300px;
            background: orange;
        }
        .son{
            width: 100px;
            height: 300px;
            background: greenyellow;
            float: left;
        }
        .clearfix::before,
        .clearfix::after{
            content: "";
            display: table;
        }
        .clearfix::after{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="father clearfix">
        Father
        <div class="son">Son</div>
    </div>
</body>
</html>

五、父级添加overflow属性

<!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>
        .father{
            width: 300px;
            background: orange;
            /* 触发了BFC */
            overflow: hidden;
        }
        .son{
            width: 150px;
            height: 300px;
            background: greenyellow;
            /* 左浮动 */
            float: left;
        }
    </style>
</head>
<body>
    <div class="father">
        Father
        <div class="son">Son</div>
    </div>
</body>
</html>

Bian_Zhuang

关注

0
点赞
踩
0

收藏

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

Why?清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题How:一、直接给父元素设置高度<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid.
复制链接

扫一扫