CSS清浮动？为什么要清除浮动？清除浮动有哪几种方法？

最新推荐文章于 2022-04-26 16:29:13 发布

原创最新推荐文章于 2022-04-26 16:29:13 发布 · 655 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#清除浮动

CSS 专栏收录该内容

14 篇文章

订阅专栏

本文深入解析CSS中的浮动机制，探讨其工作原理及如何引发高度塌陷现象，同时提供多种清除浮动的方法，包括设置父元素高度、使用额外标签、overflow属性及伪元素after，帮助读者掌握有效解决浮动带来的布局难题。

什么是浮动？

所谓css浮动就是浮动元素会脱离文档的普通流,根据float的值向左或向右移动,直到它的外边界碰到父元素的内边界或另一个浮动元素的外边界为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块级元素表现得就像浮动元素不存在一样！

为什么要清楚浮动？友情链接

当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象），正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷），所以就需要来清除浮动来改变这种情况！

清除浮动的方法：

一、给父元素设置高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>清除浮动第一中方法 给父元素设置高度</title>
    <style>
        .bigbox {
            width: 500px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        .one {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }
        .two {
            width: 200px;
            height: 200px;
            background-color: rgb(236, 240, 12);
        }
    </style>
</head>
<body>
    <div class="bigbox">
        <div class="one"></div>
        <div class="two"></div>
    </div>
</body>
</html>

没有给父元素bigbox设置高度,所以它的高度是由内容（里面的两个盒子）撑开的。

当我给里面的两个盒子设置浮动，就跳出了普通文档流 造成高度塌陷，本身外面大盒子的高度就剩边框的宽度了！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>清除浮动第一中方法 给父元素设置高度</title>
    <style>
        .bigbox {
            width: 500px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        .one {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            float: left;
        }
        .two {
            width: 200px;
            height: 200px;
            background-color: rgb(236, 240, 12);
            float: left;
        }
    </style>
</head>
<body>
    <div class="bigbox">
        <div class="one"></div>
        <div class="two"></div>
    </div>
</body>
</html>

这时给父元素设置高度就可以解决，高度塌陷的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>清除浮动第一中方法 给父元素设置高度</title>
    <style>
        .bigbox {
            width: 500px;
            height: 400px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        .one {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            float: left;
        }
        .two {
            width: 200px;
            height: 200px;
            background-color: rgb(236, 240, 12);
            float: left;
        }
    </style>
</head>
<body>
    <div class="bigbox">
        <div class="one"></div>
        <div class="two"></div>
    </div>
</body>
</html>

给父元素添加高度好用时好用，但是不推荐使用，高度最好是有内容撑开，在以后工作中，如果不确定具体高度是多少，这种给父元素添加高度的方法就不太适用!

常用清除浮动的方法：

1. 额外标签法给父元素末尾加空标签，给空标签设置：clear：both；（不推荐使用）

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>额外标签法 给给父元素末尾添加空标签 给空标签设置 clear：both；</title>
    <style>
            .bigbox {
                width: 500px;
                border: 1px solid #000;
            }
            .one {
                width: 200px;
                height: 300px;
                background-color: aquamarine;
                float: left;
            }
            .two {
                width: 200px;
                height: 200px;
                background-color: rgb(236, 240, 12);
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="bigbox">
            <div class="one"></div>
            <div class="two"></div>
        </div>
    </body>
    </html>

同样不给父元素设置高度，里面的两个盒子内容左浮动，就会出现高度塌陷的情况！

这是下面重点：

给父元素末尾添加空标签<div></div> 设置样式： clear：both；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>额外标签法 给给父元素末尾添加空标签 给空标签设置 clear：both；</title>
    <style>
            .bigbox {
                width: 500px;
                border: 1px solid #000;
            }
            .one {
                width: 200px;
                height: 300px;
                background-color: aquamarine;
                float: left;
            }
            .two {
                width: 200px;
                height: 200px;
                background-color: rgb(236, 240, 12);
                float: left;
            }
            .more {
                clear: both;
            }
        </style>
    </head>
    <body>
        <div class="bigbox">
            <div class="one"></div>
            <div class="two"></div>
            <div class="more"></div>  <!-- 给给父元素末尾添加空标签，设置样式 clear：both； -->
        </div>
    </body>
    </html>

给父元素末尾添加空标签<div></div> 设置样式： clear：both；同样可以达到清除浮动的作用，但是添加无意义标签，语义化差，不建议使用。

2. 给父元素设置属性overflow，并设置属性值 overflow：hidden； （不推荐）

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>给父元素设置属性值overflow：hidden；</title>
    <style>
            .bigbox {
                width: 500px;
                border: 1px solid #000;
            }
            .one {
                width: 200px;
                height: 300px;
                background-color: aquamarine;
                float: left;
            }
            .two {
                width: 200px;
                height: 200px;
                background-color: rgb(236, 240, 12);
                float: left;
            }
        </style>
</head>
<body>
        <div class="bigbox">
            <div class="one"></div>
            <div class="two"></div>
        </div>
</body>
</html>

同样不给父元素设置高度，里面的两个盒子内容左浮动，就会出现高度塌陷的情况！

这是下面重点：

给父元素设置属性overflow，并设置属性值 overflow：hidden；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>给父元素设置属性值overflow：hidden；</title>
    <style>
            .bigbox {
                width: 500px;
                border: 1px solid #000;
                overflow: hidden;   /* 给父元素设置内容溢出处理overflow：hidden隐藏 */
            }
            .one {
                width: 200px;
                height: 300px;
                background-color: aquamarine;
                float: left;
            }
            .two {
                width: 200px;
                height: 200px;
                background-color: rgb(236, 240, 12);
                float: left;
            }
        </style>
</head>
<body>
        <div class="bigbox">
            <div class="one"></div>
            <div class="two"></div>
        </div>
</body>
</html>

给父元素设置内容溢出处理overflow：hidden隐藏 ,同样可以清除浮动，解决高度塌陷问题；

缺点是：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素；

3.给父元素添加伪类：after，并设置属性值；（推荐使用）

.bigbox:after {
                content: "";    /* 内容为空 */
                display: block;   /* 转换为块元素 */
                clear: both;    /* 清除全部 */
            }

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>给父元素设置伪类：after</title>
    <style>
            .bigbox {
                width: 500px;
                border: 1px solid #000;
            }
            .one {
                width: 200px;
                height: 300px;
                background-color: aquamarine;
                float: left;
            }
            .two {
                width: 200px;
                height: 200px;
                background-color: rgb(236, 240, 12);
                float: left;
            }
        </style>
</head>
<body>
        <div class="bigbox">
            <div class="one"></div>
            <div class="two"></div>
        </div>
</body>
</html>

同样不给父元素设置高度，里面的两个盒子内容左浮动，就会出现高度塌陷的情况！

这是下面重点：

给父元素设置伪类：after 并设置属性值；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>给父元素设置伪类：after</title>
    <style>
            .bigbox {
                width: 500px;
                border: 1px solid #000;
            }
            .bigbox:after {
                content: "";    /* 内容为空 */
                display: block;   /* 转换为块元素 */
                clear: both;    /* 清除全部 */
            }
            .one {
                width: 200px;
                height: 300px;
                background-color: aquamarine;
                float: left;
            }
            .two {
                width: 200px;
                height: 200px;
                background-color: rgb(236, 240, 12);
                float: left;
            }
        </style>
</head>
<body>
        <div class="bigbox">
            <div class="one"></div>
            <div class="two"></div>
        </div>
</body>
</html>