【精选】清除浮动的四种方式及其原理

2023-10-19 21:25| 来源: 网络整理| 查看: 265

前言：

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

目录: 前言：一、为什么要清除浮动二、清除浮动的第一种方式---给父级盒子添加高度三、清除浮动的第二种方式---额外标签法四、清除浮动的第三种方式---给父级添加 overflow 属性五、清除浮动的第四种方式---给父级添加after伪元素

一、为什么要清除浮动

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

Document .father { width: 100%; border: 2px solid red; } .son { width: 300px; height: 300px; border: 2px solid blue; } .box { width: 100%; height: 300px; background-color: green; }

效果图如下在这里插入图片描述请注意此时我并没有给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属性，注意这个标签必须是块级元素

Document .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; } //为标签设置清除浮动 //添加清除浮动标签

效果图如下在这里插入图片描述原理： 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; }

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

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

【本文地址】

公司简介

联系我们