面试题22：为什么需要清除浮动？清除浮动的方式

最新推荐文章于 2023-08-15 23:01:41 发布

The..Fuir

最新推荐文章于 2023-08-15 23:01:41 发布

阅读量2.1k

点赞数 3

分类专栏：面试 css html 文章标签： html css

本文链接：https://blog.csdn.net/qq_51066068/article/details/124424863

版权

面试同时被 3 个专栏收录

152 篇文章 48 订阅

订阅专栏

html

50 篇文章 6 订阅

订阅专栏

css

45 篇文章 6 订阅

订阅专栏

面试官：请问为什么需要清除浮动？清除浮动的方式

浮动的定义： 非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。

浮动的工作原理：

浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）
浮动元素碰到包含它的边框或者其他浮动元素的边框停留

浮动元素可以左右移动，直到遇到另一个浮动元素或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。

浮动元素引起的问题？

父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素会跟随其后
若浮动的元素不是第一个元素，则该元素之前的元素也要浮动，否则会影响页面的显示结构

清除浮动的方式如下：

给父级div定义height属性
最后一个浮动元素之后添加一个空的div标签，并添加clear:both样式
包含浮动元素的父级标签添加overflow:hidden或者overflow:auto
使用 :after 伪元素。由于IE6-7不支持 :after，使用 zoom:1 触发 hasLayout**

浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）

没设置float:left 浮动前

设置float:left 浮动后（高度塌陷：由于father的三个子元素全部都浮动起来了，不处于普通文档流中了，所以内部没有元素来撑起父元素的内容）

如何解决？？？

第一种方法：在父元素清除浮动

overflow: hidden;

或者 overflow: auto;

清除前：

清除后：

代码实现：
<!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>
</head>
<body>
    <div class="father">
        <div class="first">元素一</div>
        <div class="second">元素二</div>
        <div class="third">元素二</div>
    </div>
    <style>
        .father{
            border: 2px solid red;
            /* 第一种方法：在父元素清除浮动   */
            /* overflow: hidden; */
            /* overflow: hidden; */
            overflow: auto;
        }
        .first{
            width: 100px;
            height: 100px;
            background-color: green;
             /* 设置浮动，脱离文档流，元素处于一个漂浮状态，已经跟普通文档流不在同一层面上了 */
            float: left;
        }
        .second{
            width: 100px;
            height: 100px;
            background-color: yellow;
             /* 设置浮动，脱离文档流，元素处于一个漂浮状态，已经跟普通文档流不在同一层面上了 */
            float: left;
        }
        .third{
            width: 100px;
            height: 100px;
            background-color: grey;
             /* 设置浮动，脱离文档流，元素处于一个漂浮状态，已经跟普通文档流不在同一层面上了 */
            float: left;
        }
    </style>
</body>
</html>

第二种：给被影响的元素后面添加一个空元素，给其设置clean:both 不建议使用给文档添加无意义的元素结构

.clean{
        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>
</head>
<body>
    <div class="father">
        <div class="first">元素一</div>
        <div class="second">元素二</div>
        <div class="third">元素二</div>
        <div class="clean"></div>
    </div>
    <style>
        .father{
            border: 2px solid red;
        }
        .first{
            width: 100px;
            height: 100px;
            background-color: green;
             /* 设置浮动，脱离文档流，元素处于一个漂浮状态，已经跟普通文档流不在同一层面上了 */
            float: left;
        }
        .second{
            width: 100px;
            height: 100px;
            background-color: yellow;
             /* 设置浮动，脱离文档流，元素处于一个漂浮状态，已经跟普通文档流不在同一层面上了 */
            float: left;
        }
        .third{
            width: 100px;
            height: 100px;
            background-color: grey;
             /* 设置浮动，脱离文档流，元素处于一个漂浮状态，已经跟普通文档流不在同一层面上了 */
            float: left;
        }
        .clean{
        clear: both;
        }
    </style>
</body>
</html>

第三种方法：

伪对象选择器结合content来使用，（给它内部的内容后追加内容）

.father::after{
        /* 第三种方法 
        3.伪对象选择器结合content来使用，（给它内部的内容后追加内容） */
        content: '123';
        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>
</head>
<body>
    <div class="father">
        <div class="first">元素一</div>
        <div class="second">元素二</div>
        <div class="third">元素二</div>
    </div>
    <style>
        .father{
            border: 2px solid red;
        }
        .first{
            width: 100px;
            height: 100px;
            background-color: green;
             /* 设置浮动，脱离文档流，元素处于一个漂浮状态，已经跟普通文档流不在同一层面上了 */
            float: left;
        }
        .second{
            width: 100px;
            height: 100px;
            background-color: yellow;
             /* 设置浮动，脱离文档流，元素处于一个漂浮状态，已经跟普通文档流不在同一层面上了 */
            float: left;
        }
        .third{
            width: 100px;
            height: 100px;
            background-color: grey;
             /* 设置浮动，脱离文档流，元素处于一个漂浮状态，已经跟普通文档流不在同一层面上了 */
            float: left;
        }
        .father::after{
        /* 第三种方法 
        3.伪对象选择器结合content来使用，（给它内部的内容后追加内容） */
        content: '123';
        display: block;
        clear: both;
        }
    </style>
</body>
</html>

The..Fuir

关注

3
点赞
踩
26

收藏

觉得还不错? 一键收藏
0
评论
面试题22：为什么需要清除浮动？清除浮动的方式

面试官：请问为什么需要清除浮动？清除浮动的方式浮动的定义：非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。浮动的工作原理：浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）浮动元素碰到包含它的边框或者其他浮动元素的边框停留浮动元素可以左右移动，直到遇到另一个浮动元素或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的.
复制链接

扫一扫