面试官：说一说CSS的浮动吧

2021年10月13日 12:39 · 阅读 243

关于浮动，是开发中经常使用的样式，在面试中，也是被经常考察的问题。浮动虽然能够轻松解决很多问题，但是使用浮动同时也会出现一些我们不想看到的局面。而有了这一篇文章，妈妈再也不用担心面试官问我浮动的问题了。

面试官：可以说一说浮动吗，比如浮动所造成的影响以及我们应该如何解决它

我：（这不还是常见的问题嘛）

首先浮动会使当前元素脱离文档流，会影响页面布局，可以通过清除浮动来解决。同时浮动会造成父元素高度塌陷，影响和父元素同级的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>
复制代码

截屏2021-10-12 下午6.27.34.png

截屏2021-10-12 下午6.27.13.png

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解决浮动的高度塌陷，外边距重合等问题