前端面试常考 | 清除浮动_前端关于浮动的面试-CSDN博客

本文链接：https://blog.csdn.net/Siebert_Angers/article/details/128365856

文章目录

一. 前言
二. 额外标签法
三. 父元素overflow
四. after伪元素
五. 双伪元素

一. 前言

近期在某吧上看到一篇帖子，作者去面试时被面试官问到:“请说出几种常见的清除浮动的方法？”看到这个帖子时我也是感觉无语，这种问题都要问，但是看到评论区下许多朋友都一脸懵逼我还是决定写这篇文章，同时也为自己巩固基础。
PS:在这里小编就不过多的提一些浮动的基础知识，但是还是会列出一些比较关键的东西。

1. 浮动的两个注意点

第一:关于浮动和标准流的父盒子搭配
在我们日常开发布局的过程中都是先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。
第二:关于浮动元素的兄弟元素
一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止起问题，但是值得注意的是浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流。

2. 为什么清除浮动

一般在开发中有些组件以一个固定高度的父盒子里面承载许多的子盒子其中的子盒子都设置浮动，但是有些特殊情况下这个承载子盒子的父盒子不能设置固定的高度，因为不明确其中的子盒子的数量有多少，理想状态是让其中的子盒子撑开父盒子这样父盒子的高度就会随子盒子的数量而变化，但是如果不给父盒子设置高度，且里面的盒子都浮动了，那么父元素的高度就会变成0。

<!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>清除浮动</title>
    <style>
        .father {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .daming {
            width: 200px;
            height: 200px;
            background-color: aqua;
            float: left;
        }

        .xiaoming {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            float: left;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="daming">大明</div>
        <div class="xiaoimng">小明</div>
    </div>
</body>

</html>

因为浮动的元素是不占用位置的，所以里面的子盒子并不会撑开父盒子，会影响到后面标准流盒子的布局。
那么怎么解决这个问题呢？这时就需要用到我们的清除浮动。

3. 清除浮动的本质

清除浮动的本质是清除浮动元素造成的影响，如果父盒子本身有高度，则不需要清除浮动。
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。
清除浮动语法:

选择器{clear:属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

二. 额外标签法

在开发中额外标签法也称为隔墙法，是W3C推荐的做法。
之所有称为额外标签法，就是会在浮动元素末尾添加一个空的标签，有一种闭合浮动的感觉。

<!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>清除浮动</title>
    <style>
        .father {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .daming {
            width: 200px;
            height: 200px;
            background-color: aqua;
            float: left;
        }

        .xiaoming {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            float: left;
        }

        .footer {
            height: 200px;
            background-color: brown;
        }

        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="daming">大明</div>
        <div class="xiaoimng">小明</div>
        <!-- 额外标签法 -->
        <div class="clear"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

优点: 通俗易懂，书写方便。
缺点: 添加许多无意义的标签，结构化较差。
值得注意的是:要求这个新的空标签必须是块级元素。

三. 父元素overflow

这种方法在开发中还是比较常用，通过给父元素设置添加overflow属性，将其属性值设置为hidden，auto，scroll都可以。

<!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>清除浮动</title>
    <style>
        .father {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
            /* 父元素overflow清除浮动 */
            overflow: hidden;
        }

        .daming {
            width: 200px;
            height: 200px;
            background-color: aqua;
            float: left;
        }

        .xiaoming {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            float: left;
        }

        .footer {
            height: 200px;
            background-color: brown;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="daming">大明</div>
        <div class="xiaoimng">小明</div>
    </div>
    <div class="footer"></div>
</body>

</html>

优点: 代码简洁
缺点: 无法显示溢出部分

四. after伪元素

:after方式是额外标签法的升级版。也是给父元素添加，开发中也比较常用。

<!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>清除浮动</title>
    <style>
        .father {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        /* :after伪元素法 */
        .clearfix::after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .daming {
            width: 200px;
            height: 200px;
            background-color: aqua;
            float: left;
        }

        .xiaoming {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            float: left;
        }

        .footer {
            height: 200px;
            background-color: brown;
        }
    </style>
</head>

<body>
    <div class="father clearfix">
        <div class="daming">大明</div>
        <div class="xiaoimng">小明</div>
    </div>
    <div class="footer"></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>清除浮动</title>
    <style>
        .father {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        /* 双伪元素清除浮动 */
        .clearfix::before,
        .clearfix::after {
            content: "";
            display: table;
        }

        .clearfix::after {
            clear: both;
        }

        .daming {
            width: 200px;
            height: 200px;
            background-color: aqua;
            float: left;
        }

        .xiaoming {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            float: left;
        }

        .footer {
            height: 200px;
            background-color: brown;
        }
    </style>
</head>
<body>
    <div class="father  clearfix">
        <div class="daming">大明</div>
        <div class="xiaoimng">小明</div>
    </div>
    <div class="footer"></div>
</body>
</html>

优点: 代码简洁