面试经---CSS篇(不间断更新补充，一起学习)

面试题1、什么是BFC ？可以用来解决什么东西造成的影响 ？

BFC，即Block Formatting Context，是Web页面布局中的一个重要概念。根据W3C CSS2.1规范，BFC是指浏览器中创建的一个独立的渲染区域，并且拥有自己的一套渲染规则。BFC中的元素按照特定的规则进行定位，并与其他元素相互作用和影响。

BFC的特性如下：

1. 完全独立：BFC中的元素不会影响到其他元素的布局。反之，其他元素也不会影响到BFC中的元素。

2. 内部元素垂直布局：BFC内部的块级元素会按照垂直方向进行布局，一个接一个地排列。
   代码如下：

   <div class="father">
    <div class="son">
      000000
    </div>
    <span>11111</span>
    <span>22222</span>
    <div class="son">
     33333
    </div>
   </div>
   .father {
    overflow: hidden; border: 8rpx solid #000;
    .son{
     width: 100rpx;
     height: 100rpx;
     background-color: red;
    }
   }
   

   结果如图：

   

3. 外边距决定元素间距：BFC中元素的垂直间距由其外边距（margin）决定。即使存在浮动元素，BFC也能有效地控制元素间距。

4. 浮动元素布局：BFC内部可以包含浮动元素，这些浮动元素不会影响到BFC外部的元素布局。

   <div class="father">
    <div class="son">
     000000
    </div>
    <div class="son">
     33333
    </div>
    <div class="son son1">
     44444
    </div>
    <div class="son son2">
     55555
    </div>
   </div>
   .father {
    overflow: hidden;
    border: 8rpx solid #000;
     .son{
      width: 100rpx;
      height: 100rpx;
      background-color: red;
      margin: 40rpx;
     }
     .son1{
      float: left;
     }
     .son2{
      float: right;
     }
   }
   

   结果如图：

   

5. 计算高度时考虑浮动：在计算BFC的高度时，浮动元素的高度也会被包含在内。如：假设两个div(父div包裹着子div)，且父div没有设置高度子，同时子div设置了浮动，那么此时父div便会发生高度塌陷，具体代码如下：

   .father { border: 2rpx solid #000; } .son{ float: left; width: 100rpx; height: 100rpx; background-color: red; } 

结果如图：

修改为BFC，也就是在父类中添加overflow: hidden;结果如图：

解决了父元素高度坍塌问题。

触发BFC的常见元素和样式包括：

1. 浮动元素（float不为none）
2. 定位元素（position为absolute、fixed）
3. 指定为inline-block、table-cell或table-caption的元素
4. 溢出隐藏（overflow为hidden）或溢出滚动（overflow为scroll）的元素
5. 设置display为table或table-row的元素
6. 包含inline-block、inline-table或flex等内联块级元素的容器

使用BFC可以解决许多常见的布局问题，例如自适应两栏布局、margin的重合、清除浮动以及margin的紧急拖拽等。通过合理地利用BFC，可以有效地控制页面布局，提高页面渲染性能，并解决一些常见的布局问题。