浮动带来的问题，以及清除浮动影响的方式

淩亂°似流年 2022-05-09 07:08 339阅读 0赞

查阅多篇资料，最初使用浮动float是为了让文字环绕图片，这样显示的效果会更好一点；因为元素使用浮动之后元素就具有了块级元素和行级元素的特点，不仅可以设置宽高也能设置在水平方向上的排列布局；  
到现在由于浮动所带来的问题有两个：

## 问题一：父元素高度坍塌 ##

在未设置子元素浮动的情况下的运行效果图为：  
![在这里插入图片描述][70]  
当为fa\_son1， fa\_son2，fa\_son3设置`float: left`后的显示效果为：  
![在这里插入图片描述][70 1]  
在这里可以看到子元素浮动之后，父元素的上下边框发生了合并，即父元素高度发生了坍塌。这个就是浮动子元素带来的影响；接下来就是如何消除这种浮动带来的影响；

## 问题二：浮动元素之后的普通元素无视浮动元素 ##

显示效果：  
![在这里插入图片描述][70 2]  
当为\#d2添加`float:left`之后的现象为：  
![在这里插入图片描述][70 3]  
**分析**：d3的黄色块去哪里了？？？，当d2使用浮动之后，他是漂浮在文档流之上的，文档流中的普通元素就会表现的该浮动元素没有一样！完全无视他；所以他就顶上去了紧挨着d1；但是浮动元素虽然脱离了正常的文档流但是他还是占据着正常文档流的文本空间，因此，d3的文本就会被d2顶下来；但是这种布局已经影响到了接下来的网页布局，是不允许的，因此这也是浮动造成的影响之一。  
**接下来就是总结几种常用的清除浮动的方法：**

## 方法一： ##

**为父元素添加固定高度**  
在没有设置父元素高度时，父元素的高度为`height:auto`他的高度是由子元素撑开的；所以良好的解决了父元素高度坍塌的问题；同时由于设置了固定的高度，整个父元素盒子相对于外界就是一个普通的块级元素；因此也良好的解决了问题2；但是缺陷就是，因为设置了固定的高度，他的维护性就注定是很差的，只适用于固定高度布局的网页布局；

## 方法二： ##

增加一个空div元素，设置`clear：both`  
需要注意的是clear属性是设置在空元素上的，float会影响其他的相邻元素，但是clear只会影响自身，不会对他的相邻元素产生影响；他的要求是保证自己的两边不会有浮动元素；

`clear:left`代表在左侧不会有浮动元素，类似的right是在右侧不会有浮动元素；`clear：both`是表示在元素的两侧不存在浮动元素；在空的div块中使用这个属性可以保证这个空div块会下移，此时就可以撑开父元素；同时这个空div块也是一个常规的块级标签因此也会良好的解决问题2；  
缺陷：为了布局添加了毫无意义的标签，如果有大量的毫无意义的空div标签那么将会造成极大的冗余。

## 方法三： ##

**将父元素也一并浮动起来**  
为了解决子元素浮动造成父元素高度坍塌，父元素也选择了一起浮动，解决了问题1；但此时父元素也是一个浮动元素了，就会出现问题2；难道接下来的块级标签也要一并选择浮动吗？有一种冤冤相报何时了的感觉；最后容易将很大一个版块内的元素都浮动起来，虽然可以减少不必要的标签，但是浮动变的非常的复杂；

## 方法四： ##

**为父元素设置`overflow:hidden`**  
overflow的作用是定义在包含的内容对于指定的尺寸太大的情况下元素应该怎么样；在默认情况下，多出来的部分会溢出父容器；设置`overflow：hidden`可以将多出来的元素部分隐藏起来；同时他还有一个有用的副作用：他会自动清理浮动的子元素。相比较前几个方法，他的优点是没有额外的标签；也不用导致复杂的浮动；  
对于`overflow：hidden`我看到一篇博客上讲它清除浮动有趣解释：父元素中设置`overflow：hidden`意味着他要隐藏超出的部分，这个时候他就需要知道自己的范围和内部元素的范围。float的元素虽然已经脱离了标准的文档流但是他并不是被完全无视的，父元素只有明确了内部所有元素的尺寸才能结合自己的尺寸进行选择性的隐藏；我总结了一句话：**父元素祭出`overflow：hidden`大招，一阵电波扩散出去，隐身的float元素都会无所遁形**  
但是他有一个巨大的缺陷：受限于`overflow：hidden`的主要功能，如果子元素的尺寸大于父元素，或者子元素中的内容过多，那么多出来的这一部分将不会溢出，也不会显示出来，会直接被hidden起来；因此这个方法不适用于子元素的内容过多；

## 方法五： ##

**使用伪元素`：after`**

.clearfix:after{
                content: '';
                display: block;
                clear: both;
            }

![在这里插入图片描述][70 4]  
**分析：**  
显示效果如图所示，解决了问题1和问题2；同时超出的部分没有被隐藏；只需要在父元素上添加一个class，约定俗成类名为clearfix;类使用after伪元素，在父元素现有内容的末尾添加新的内容。添加的内容是一个`display: block; clear: both;`的空元素；和方法二相似；只要有需要，直接写上类名即可。  
**注意：**  
在伪元素中添加的content只有在**css渲染的时候**向元素逻辑上的头部或者尾部添加内容；并不会添加到DOM中，**不会改变文档的内容，也不可以赋值，仅仅是在css渲染层加入**，因此不要使用伪元素展示有意义的内容，尽量只是展示修饰性额内容，例如图标；【我现在才明白为什么有些图标是用伪元素添加的】。

## 最后的话： ##

1：总以为冰山啃掉一大半，其实都还早，还有很多有关浮动的好的知识要去总结学习，比如BFC等；  
2：别着急，慢慢来；别松懈，快快走。

[70]: /images/20220509/b028e297a9f54d2b82d86efeaf858a39.png
[70 1]: /images/20220509/0226248afa4646fa9ad1da950addeda9.png
[70 2]: /images/20220509/0c512ec1eb194794b91824e89d1fb401.png
[70 3]: /images/20220509/5d4fecd83f124914928a97fa56c1ac51.png
[70 4]: /images/20220509/347f71107d3842ebbfdf0fee92250495.png