关于浮动，是开发中经常使用的样式，在面试中，也是被经常考察的问题。浮动虽然能够轻松解决很多问题，但是使用浮动同时也会出现一些我们不想看到的局面。而有了这一篇文章，妈妈再也不用担心面试官问我浮动的问题了。
面试官：可以说一说浮动吗，比如浮动所造成的影响以及我们应该如何解决它
我：（这不还是常见的问题嘛）
首先浮动会使当前元素脱离文档流，会影响页面布局，可以通过清除浮动来解决。同时浮动会造成父元素高度塌陷，影响和父元素同级的Dom布局，可以触发父元素的BFC解决。
Firstblood
面试官：刚才你说到浮动会脱离文档流，position:absolute也会脱离文档流，二者是一样的吗？
我：（阿这，看这样时wdz了）
首先，浮动的脱离文档流，是属于脱了，但没完全脱。是一种半脱离文档流，而position:absolute是完全脱离文档流，二者的区别就在于这里。就像浮动的元素是永远不会重叠的，虽然它脱离了文档流但它依旧影响着页面布局。
而且浮动是不会影响文字的（因为浮动创建的初衷就是能让文字围着图片），像下面的代码用浮动和定位就是两种情况
<style>
.div1{
background-color: chartreuse;
opacity: 0.5;
/* float: left; */
position:absolute;
width: 100px;
height: 100px;
line-height: 100px;
}
.div2{
background-color:coral
}
</style>
<body>
<div class="div1">
浮动元素
</div>
<div class="div2">
请你猜猜我会不会被挡住,猜一猜呀猜一猜
</div>
</body>
Doublekill
面试官：那如何来清除浮动呢？
我：因为浮动脱离文档流会影响后面Dom的布局（和浏览器的渲染有关，例如上面的图片的字体部分），我们可以针对浮动元素后面的第一个元素加上clear:both从而解决浮动元素带来的影响。 或者通过伪元素来清除浮动：
.div1::after {
content:""; /*设置内容为空*/
height:0; /*高度为0*/
line-height:0; /*行高为0*/
display:block; /*将文本转为块级元素*/
visibility:hidden; /*将元素隐藏*/
clear:both; /*清除浮动*/
}
面试官：那如何解决父元素的高度塌陷问题
我：我们可以用上面的方法对父元素进行清除浮动，从而解决父元素高度塌陷的问题。同时我们也可以给父元素设置overflow:hidden等属性，触发父元素的BFC，从而解决父元素高度塌陷的问题。
面试官：那你说到了BFC,可以讲一讲什么是BFC吗
我：BFC名为“块级格式上下文”，也就是说触发BFC的盒子，盒子内部的元素不会影响外面的布局。我们可以通过定位，overflow以及display等属性触发它。在日常开发中，我们可以用BFC解决浮动的高度塌陷，外边距重合等问题
