关于清除浮动
浮动：它不是一个正常流布局，浮动元素会从文档的正常流中删除，但是他还是会影响布局，浮动应用于所有的元素，当一个元素浮动时，其他内容会“环绕”该元素。
float属性有四个值：left，right分别浮动元素到相应的方向，none（默认），使元素不浮动，inherit将从父级元素获取float值
float可用来创建全部网页布局，如导航条的一行排列，左右两栏布局 ，浮动在左右两栏布局中很常见。
<style>
.content {
background-color: black;
border: 2px solid red;
}
.div1 {
width: 20%;
height: 200px;
background-color:red ;
float: left;
}
.div2 {
width: 20%;
height: 200px;
background-color: blue;
float: left;
}
</style>
<body>
<div class="content">
<div class="div1"></div>
<div class="div2"></div>
</div> 
当没有给父元素设定高度的时候，子元素浮动会造成父元素高度就会塌陷为零。
为什么会造成这种情况呢？
打个比方，父元素就如一个有伸缩性的容器，而子元素就如一个气球。当没有设置容器的高宽时，他的高宽完全是被装在里面的气球撑开的，当子元素浮动时候，就像气球从容器里飘了出来，飘在了他的上方。而此时容器也就空了，由于伸缩性，高度就变为了0，看不见了。
现在来讨论一下解决方案以及最优解。
1. 父元素也添加浮动
.content {
background-color: black;
width: 100%;
float: left;
} 缺点：虽然可以解决问题，但是后面要添加有不需要浮动的子元素，则影响其显示。
2.给父元素添加一个夯余元素
<div style="clear:left;"></div> 注：clear 属性规定元素的哪一侧不允许其他浮动元素。
当添加了最后一个冗余元素（未设置clear:both）时；父元素和此冗余元素的高度都为0，并且三个浮动的元素都浮在了它们的上方盖住了它们（可以把它们看成PS中的图层）。现在，给这个冗余元素添加clear:both，它便要躲开这三个浮动元素，因此，一直往下跑，直到没有被浮动元素盖住才停下来。而父元素看到这个子元素跑开了，自然想要包裹住它。
加上clear:both后，夯余元素从顶部跑到底部 。就这样父元素被撑开了。
缺点：添加了一个无关元素，代码阅读受影响，不符合语义化。
3.给父元素content添加一个伪类
.content::after {
content: " ";
display: block;
clear: both;
} 这个方法比较清晰，也提高了易读性。推荐这个。
4.给父元素添加overflow: hidden;
.content {
background-color: black;
border: 2px solid red;
overflow: hidden;
} 缺点：一旦包含非浮动的子元素，则会影响其显示。
下面我们来讨论一下为什么overflow:hidden可以解决这个问题，它不是用于当子元素超出范围然后裁剪的吗？
先引入一个概念：BFC（块级格式化上下文）
W3C对BFC的定义如下：
浮动元素和绝对定位元素，非块级盒子的块级容器（例如inline-blocks, table-cells, table-captions)，以及overflow值不为“visiable”的块级盒子，都会为它们的内容创建新的BFC。
创建了 BFC的元素就是一个独立的盒子，不过只有Block-level box可以参与创建BFC， 它规定了内部的Block-level Box如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。其中一条属性为：计算BFC的高度时，浮动元素也参与计算。
所以给父元素创建块级格式化上下文，就可以让浮动的元素参与高度计算，这样一来，父元素的高度就有了。所以使用overflow.hidden会触发BFC，让浮动元素也参与计算高度中。
不单单只有给父元素添加overflow:hidden才可以创建块级格式化上下文，下列方法都可以：
- 浮动 (元素的
float不为none） - 绝对定位元素 (元素的
position为absolute或fixed) - 行内块 inline-blocks (元素的
display: inline-block) - 表格单元格 (元素的
display: table-cell，HTML表格单元格默认属性) - 表格标题 (元素的
display: table-caption，HTML表格标题默认属性) overflow的值不为 visible的元素- 弹性盒子 flex boxes (元素的
display: flex或inline-flex)
用overflow:hidden较多的原因是不会带来其它的布局问题。
参考：https://www.jianshu.com/p/5a7854a73298
https://www.zhihu.com/question/30938856
查看7道真题和解析
。已经有面试经验了开投大厂， 遇到不错的中厂可以先去干两个月优化一下简历然后继续大厂，几十个人的公司9✌🏻别去了。
投递金蝶等公司10个岗位
学而思公司福利 403人发布