清除浮动的方法及优缺点

谁践踏了优雅 2023-02-21 11:56 11阅读 0赞

# 清除浮动的方法及优缺点 #

## 概论 ##

浮动最开始是为了实现页面中的图文环绕效果,如今被大家广泛用于页面布局之中。

浮动(float)这个属性让我们又爱又恨,爱的是它的功能,恨的是他的负作用,那我们今天就来看看它有什么负作用,我们如何解决这些负作用。

## 浮动产生的负作用 ##

### 直接问题 ###

由于子元素开启浮动,导致父元素在计算布局时,无视了内部开启浮动的的子元素,从而导致父元素的高度塌陷(父元素高度为0或者高度错误)

### 间接问题 ###

#### 1.背景不能显示 ####

虽然父元素(parent元素)设置了background相关CSS样式,但是由于父元素(parent元素)高度为0,导致父元素(parent元素)背景无法显示

#### 2.页面布局错乱 ####

> 在页面布局时,下面与父元素(parent元素)同级的兄弟元素会占据原本应该被当前父元素(parent元素)占据的位置

## 清除浮动造成的影响 ##

### 方法一: 给浮动元素的父元素添加高度 ###

![在这里插入图片描述][2020063015135691.png]  
![在这里插入图片描述][2020063015135699.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0_size_16_color_FFFFFF_t_70]  
说明:

1.  该方法给父元素添加了高度,从而在布局上将当前的\#inner元素与后面的浮动元素从布局上分割开来,相当于清除了浮动带来的影响
2.  优点:简单易懂
3.  缺点:需要手动设置父元素高度,导致父元素高度无法自适应,维护起来较为麻烦
4.  此方法建议少用

### 方法二:使用外墙元素隔离法 ###

首先我们看下下面的案例,该案例中,由于\#inner元素浮动的原因,导致父元素\#wrap没有高度,从而下面的\#content元素从页面的顶端开始布局,结果布局错乱  
![在这里插入图片描述][20200630151433967.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0_size_16_color_FFFFFF_t_70 2]

> 我们这时候给\#wrap元素和\#content元素之间添加一堵墙(一个元素),并给他添加上clear属性,从而清除该元素受到的浮动的影响,使得后续的布局能正常显示  
> ![在这里插入图片描述][20200630151552479.png]  
> ![在这里插入图片描述][20200630151552479.png]  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0_size_16_color_FFFFFF_t_70 3]  
> 说明:

1.  完美隔开, 现在\#content元素完全和前面的浮动元素隔离了
2.  你可以随意控制”墙”的高度,来增加\#wrap和\#content元素之间的距离
3.  缺点:

> (1)额外增加了一个元素,影响整体结构

> (2)\#wrap元素的高度塌陷问题没得到解决,依旧没有高度

### 方法三:使用内墙元素隔离法 ###

在方法二的结尾我们说了,额外增加了一个元素,影响了整体的结构

那么,我们就干脆把这堵”墙”放在\#wrap元素内部  
![在这里插入图片描述][20200630151628241.png]  
![在这里插入图片描述][20200630151628237.png]

> 我们这时候给\#wrap元素和\#content元素之间添加一堵墙(一个元素),并给他添加上clear属性,从而清除该元素受到的浮动的影响,使得后续的布局能正常显示  
> ![在这里插入图片描述][20200630151650424.png]  
> ![在这里插入图片描述][20200630151650427.png]  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0_size_16_color_FFFFFF_t_70 4]  
> 说明:

1.  在我们把”墙”放到\#wrap元素中,出现了神奇的效果,\#wrap元素居然有高度了
2.  原因就是\#wrap2元素被固定在浮动元素的下面,  
    \#wrap元素想要包含住这个新的<div>则必须自己有高度才行, 然后他就自己有了高度
3.  缺点:

> (1)额外增加了一个元素,影响整体结构

> (2)在相当长的一段时间内, 这个方法是各大公司常用的手段

### 方法四:使用伪元素隔离法(内墙元素隔离法的升级版) ###

内墙法效果十分不错,但是对于广大程序猿们来说,能少动手的坚决不多动一下,然而在使用内墙法的时候,我们还要特地去写一个元素来清除浮动,这样对于我们这些高贵的程序猿来说,那是不可能的。

于是CSS中有伪元素这个概念,我们可以借助before和after这两个伪元素来实现内墙法的升级版本。  
![在这里插入图片描述][20200630151850997.png]  
![在这里插入图片描述][2020063015200578.png]

> 我们这时候给\#wrap元素和\#content元素之间添加一堵墙(一个元素),并给他添加上clear属性,从而清除该元素受到的浮动的影响,使得后续的布局能正常显示  
> ![在这里插入图片描述][20200630152051333.png]  
> ![在这里插入图片描述][20200630152051330.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0_size_16_color_FFFFFF_t_70 5]  
> 说明:

1.  利用该方法能完美的解决浮动的负作用
2.  对于部分垃圾浏览器不兼容伪元素的情况(你懂得是哪些),那就把伪元素的两个冒号改成一个冒号即可

### 方法五:使用overflow属性 ###

说到overflow属性,大家第一反应就是将溢出父元素的内容隐藏。

然而我们将它用到浮动元素的父元素上时.你会发现以下情况  
![在这里插入图片描述][20200630152132519.png]![在这里插入图片描述][20200630152132523.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0_size_16_color_FFFFFF_t_70 6]  
说明:

1.  出现这种情况的主要原因是因为overflow属性的值如果不为visible  
    (默认值),它将会开启BFC(英文: Block Formatting Context,中文:块级格式化上下文)
2.  这种方法清除浮动也不错,对元素的影响较小,但是在某些特殊情况下不适用

## 总结 ##

清除浮动的核心思路就是想尽办法让浮动元素的父元素有高度,以上五种方法中,主要推荐伪元素隔离法或oveflow属性(该方法视情况而定)  
块级格式化上下文)

[2020063015135691.png]: https://img-blog.csdnimg.cn/2020063015135691.png
[2020063015135699.png]: https://img-blog.csdnimg.cn/2020063015135699.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020063015135689.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0,size_16,color_FFFFFF,t_70
[20200630151433967.png]: https://img-blog.csdnimg.cn/20200630151433967.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200630151433963.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200630151433962.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0,size_16,color_FFFFFF,t_70
[20200630151552479.png]: https://img-blog.csdnimg.cn/20200630151552479.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200630151552476.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0,size_16,color_FFFFFF,t_70
[20200630151628241.png]: https://img-blog.csdnimg.cn/20200630151628241.png
[20200630151628237.png]: https://img-blog.csdnimg.cn/20200630151628237.png
[20200630151650424.png]: https://img-blog.csdnimg.cn/20200630151650424.png
[20200630151650427.png]: https://img-blog.csdnimg.cn/20200630151650427.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200630151650428.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0,size_16,color_FFFFFF,t_70
[20200630151850997.png]: https://img-blog.csdnimg.cn/20200630151850997.png
[2020063015200578.png]: https://img-blog.csdnimg.cn/2020063015200578.png
[20200630152051333.png]: https://img-blog.csdnimg.cn/20200630152051333.png
[20200630152051330.png]: https://img-blog.csdnimg.cn/20200630152051330.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200630152051326.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0,size_16,color_FFFFFF,t_70
[20200630152132519.png]: https://img-blog.csdnimg.cn/20200630152132519.png
[20200630152132523.png]: https://img-blog.csdnimg.cn/20200630152132523.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200630152150358.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0,size_16,color_FFFFFF,t_70