清除浮动的四种方式及其原理

最新推荐文章于 2023-12-15 17:43:16 发布

FL_csdn1

最新推荐文章于 2023-12-15 17:43:16 发布

阅读量1.4w

点赞数 49

分类专栏： Web前端文章标签： css html 经验分享程序人生其他

本文链接：https://blog.csdn.net/FL_csdn1/article/details/113496670

版权

Web前端专栏收录该内容

21 篇文章 1 订阅

订阅专栏

前言：

什么是浮动，浮动给我们造成了什么困扰，我们该使用什么方式来解决它。下面会介绍到为什么要清除浮动以及清除浮动的四种方式。

一、为什么要清除浮动

在我们的开发过程中，浮动元素是css中最常用的属性，浮动起来的元素会脱离标准流，如果我们的父级盒子没有设置高度就会造成父级盒子的高度塌陷，就会影响我们下面盒子的正常显示。
什么是高度塌陷呢，我们用一个小小的案例来了解一下，请看下面代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .father {
        width: 100%;
        border: 2px solid red;
      }
      .son {
        width: 300px;
        height: 300px;
        border: 2px solid blue;
      }
      .box {
        width: 100%;
        height: 300px;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="son"></div>
      <div class="son"></div>
    </div>
    <div class="box"></div>
  </body>
</html>

效果图如下
在这里插入图片描述
请注意此时我并没有给father这个盒子设置高度，接下来给son盒子设置一个左浮动

 	.son {
        width: 300px;
        height: 300px;
        border: 2px solid blue;
        float: left;
      }

请看效果图
在这里插入图片描述
我们发现father盒子成为一条红线，box盒子跑到son盒子的后面，这就是因为father盒子没有高度，在没有设置浮动之前son盒子是属于标准流的，son盒子会把father盒子撑开，一旦给son盒子设置浮动，它就会立即脱离标准流浮动起来（就是离开father盒子），而father没有设置高度，在失去son盒子支撑的时候就会变成一条横线，随即下面的box盒子就会跟随father盒子跑上去。这就是造成高度塌陷的原因。
高度塌陷会影响到我们下面的盒子，所以我们需要将浮动的son盒子重新塞回father盒子，也就是清除浮动，让我们的box盒子正常显示。

二、清除浮动的第一种方式—给父级盒子添加高度

造成高度塌陷的原因就是父盒子没有高度，我们只需要给父盒子添加一个高度即可

 	.father {
        width: 100%;
        border: 2px solid red;
        height: 300px;
      }

效果如下
在这里插入图片描述
原理： 我们上面说到，造成高度塌陷的原因就是父盒子没有高度，我们只需要给父盒子添加一个高度即可，但是这种方式并不推荐使用，因为有很多局限性，况且son盒子依然是脱离标准流，并没有回到father盒子中，所以做一个简单的了解即可。

三、清除浮动的第二种方式—额外标签法

额外标签法会在浮动元素末尾添加一个空的标签。给这个标签设置clear属性，注意这个标签必须是块级元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .father {
        width: 100%;
        border: 2px solid red;
      }
      .son {
        width: 300px;
        height: 300px;
        border: 2px solid blue;
        float: left;
      }
      .box {
        width: 100%;
        height: 300px;
        background-color: green;
      }
      .clear {
        clear: both;
      } //为标签设置清除浮动
    </style>
  </head>
  <body>
    <div class="father">
      <div class="son"></div>
      <div class="son"></div>
      <div class="clear"></div>
    </div>
    <div class="box"></div>//添加清除浮动标签
  </body>
</html>

效果图如下
在这里插入图片描述
原理： clear：both的作用是不允许周围有浮动现象，所以就可以达到清除浮动的效果，但是这样做，对于比较复杂的页面就显得结构非常的乱，所以不推荐使用

四、清除浮动的第三种方式—给父级添加 overflow 属性

这个方法是向浮动元素的父级盒子添加voerflow：hidden属性，这样就可以达到清除浮动的效果

	.father {
        width: 100%;
        border: 2px solid red;
        overflow: hidden;
      }

效果如下
在这里插入图片描述
原理： 让我们先来了解一下BFC（Block Formatting Context），BFC全称是块级格式化上下文，用于对块级元素排版，默认情况下只有根元素（body）一个块级上下文，但是如果一个块级元素设置了float:left,overflow:hidden或position:absolute样式，就会为这个块级元素生产一个独立的块级上下文，使这个块级元素内部的排版完全独立。也就是说独立的块级上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，就是说包含块会把浮动元素的高度也计算在内，这样就达到了清除浮动的效果，但是overflow:hidden本身的意思是溢出的元素隐藏显示，所以说有一定的缺点，大家可以根据情况来使用它。

五、清除浮动的第四种方式—给父级添加after伪元素

利用after伪元素定义一个clearfix类，浮动元素的父级元素调用此类可以实现清除浮动的效果

	.clearfix::after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }
      .clearfix {
        /* IE6、7 专有 */
        *zoom: 1;
      }

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

效果图如下
在这里插入图片描述
原理： 这个方式的原理和额外标签法的方式异曲同工，只是利用伪类向浮动元素的父盒子的后面添加了一个块级元素，至于*zoom: 1这个属性，是为了兼容低版本的浏览器。这种方式没有增加标签，结构更简单，也没有overflow带来的隐藏影响，很推荐使用这样的方式。

能力有限，文章难免会有不全面的问题，欢迎大家交流指正

FL_csdn1

关注

49
点赞
踩
206

收藏

觉得还不错? 一键收藏
14
评论
清除浮动的四种方式及其原理

目录一、为什么要清除浮动二、清除浮动的第一种方式---给父级盒子添加高度三、清除浮动的第二种方式---额外标签法四、清除浮动的第三种方式---给父级添加 overflow 属性五、清除浮动的第四种方式---给父级添加after伪元素一、为什么要清除浮动在我们的开发过程中，浮动元素是css中最常用的属性，浮动起来的元素会脱离标准流，如果我们的父级盒子没有设置高度就会造成父级盒子的高度塌陷，就会影响我们下面盒子的正常显示。什么是高度塌陷呢，我们用一个小小的案例来了解一下，请看下面代码。<!DOCT
复制链接

扫一扫