CSS常见面试题--BFC

面试题：你知道什么是BFC吗？

一、什么是BFC？

BFC（Block Formatting Context）是块级格式化上下文的意思。它规定了元素如何对其它内容进行定位，以及与其它元素的关系及相互作用。

二、BFC的原理是什么？

1. 属于同一个BFC的相邻两个盒子垂直方向会发生边距重叠
2. BFC区域不会和浮动元素区域发生重叠
3. BFC是页面上一个独立的容器，容器里的子元素不会影响到外面的元素，外面的元素也不会影响里面的子元素
4. 计算BFC的高度时，浮动子元素也参与计算。

三、如何形成BFC？

1. float取值不为none
2. position取值为absolute或fixed
3. overflow取值不为visible（auto或者hidden）
4. display取值为table-cell,table-caption,flex,inline-flex,inline-block

四、BFC在实际开发中有哪些应用？

1、利用BFC区域不和浮动元素发生重叠进行自适应布局

<section id="layout">
   <style media="screen">
     #layout .left{
       width: 100px;
       height: 100px;
       float: left;
       background-color: pink;
     }
     #layout .right{
       height: 110px;
       overflow: auto;
       background-color: antiquewhite;
     }
   </style>
   <div class="left"></div>
   <div class="right"></div>
 </section>

2、利用浮动元素也参与计算BFC高度清除浮动、消除高度塌陷的问题

<section id="float">
   <style media="screen">
     #float .father{
       background-color: blue;
       overflow: hidden;
     }
     #float .child{
       float: left;
       background-color: pink;
       width: 300px;
       height: 50px;
     }
   </style>
   <div class="father">
     <div class="child">我是浮动元素</div>
   </div>
 </section>

3、解决垂直方向边距重叠的问题

<section id="margin">
   <style media="screen">
     #margin p{
       margin: 20px auto 30px;
       background-color: pink;
     }
     #margin .create-bfc{
       overflow: auto;
     }
   </style>
   <p>我是第一个p元素</p>
   <div class="create-bfc">
    <p>我是第二个p元素</p>
   </div>
 </section>

补充：根据盒模型解释下边距重叠？

问题描述：两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值最大的那个为最终结果显示在页面上。

边距重叠分为以下3种：

1、父子元素边距重叠

• 如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距。
• 给父元素添加overflow:hidden，这时父元素就形成BFC，不会随子元素产生外边距，但是父元素的高度会发生变化。

2、兄弟元素边距重叠

• 兄弟平级元素在垂直方向上会出现外边距重叠的情况，最后外边距的大小取绝对值大的那个

3、空元素自身上下边距重叠

• 空元素自身的margin-top和margin-bottom也会重叠，最后外边距取绝对值大的那个。

补充：浮动会造成什么问题？如何清除浮动？

问题描述：父元素未设置高度，子元素浮动后脱离文档流，导致父元素高度塌陷

清除浮动的几种方法

1、让父元素也浮动。

     缺点：页面整体浮动，影响布局，不推荐

2、给父元素设置overflow:hidden，触发BFC。

     缺点：内容增多的时候溢出部分被隐藏，不推荐

3、在最后一个浮动标签之后添加一个空元素，设置clear:both。

    缺点：页面添加无效标签，语义化差，不推荐

4、伪元素。.clearfix::after{content:"";display:block;clear:both}