某外企面试题，你真的了解BFC吗？

面试时，面试官问的问题绝不是随口问的，肯定是他想用这个问题去考察你的知识储备，往往很多时候都是有一道面试题，引出其他问题，而作为面试者就要引导面试官去问一些你自己知道的，且准备充分方面的问题。

下面就由一道浮动问题 / 防止高度塌陷引出的什么是BFC，怎么产生的BFC，以及怎么解决这个问题。

防止高度塌陷

原因： 父元素不写高度时，子元素浮动后，导致父元素会发生高度塌陷（造成父元素高度为0）。

解决：

给父元素添加声明 overflow: hidden，优点：代码少，简单。缺点：不能和position定位配合使用，超出尺寸会被隐藏。其实display: table也时可以的。
在浮动元素下方添加空div，并给元素申明clear: both，保险起见，再加height:0，清除个别元素可能自带的height: 16px。缺点：需要添加多余的空标签并添加属性。
用伪元素解决：

css 复制代码

.box::after{
    content:'',
    display: block,
    clear: both,
    height: 0
}

父元素添加浮动，缺点：产生新的浮动问题，因为BFC。

好问题来了，什么是BFC，接下来就为大家介绍一下。

BFC

BFC 定义

BFC(Blcok formatting context) 直译为"块级格式化上下文"。他是一个独立的渲染区域，只有块级元素参与，它规定了内部块级元素的布局，并且与这个区域外部毫不相关，外部元素也不会影响这个渲染区域的元素。
简单说：BFC 就是页面上的一个隔离的独立渲染区域，区域里边的子元素不会影响到外面的元素。外边的元素也不会影响到区域里面的子元素。
Box，盒子是CSS布局的对象和基本单位，直观点说，就是一个页面是由很多个盒子区域组成。元素的类型和 display 属性，决定了这个盒子区域的类型。
- 不同类型的盒子区域内的子元素，会以不同的 Formatting Context (一个决定如何渲染文档的容器) 方式渲染。
- 块级元素盒子，display属性为block、list-item、table的元素，会生成块级元素渲染区域。并且以 BFC(Blcok formatting context) 方式渲染。
- 行级元素盒子，display 属性为inline、inline-block、inline-table的元素，会生成行级元素渲染区域。并且以IFC (inline formatting context) 方式渲染。
- 所以，CSS 中最常见的渲染方式就是：BFC and IFC。

BFC的布局规则

默认，内部的块元素会在垂直方向，一个接一个地放置，每个块元素独占一行
块元素垂直方向的总距离由 margin 决定。属于同一个 BFC 的两个相邻块元素在垂直方向上的 margin 会发生重叠/合并。但水平方向的 margin 不会。
左侧 BFC 渲染区域的 margin，必须与右侧BFC渲染区域的 margin相衔接，不能出现重叠。
BFC 渲染区域不会与 float浮动定义的元素区域重叠。
BFC 就是页面上的一个隔离的独立渲染区域，独立渲染区域里面的子元素不会影响到外面的元素。反之外面的元素也不会影响到渲染区域里边的子元素。
计算父元素的 BFC 渲染区域的高度时，内部浮动元素的高度，都必须算在内。

如何创建一个 BFC

float的值不是none。
position的值不是static或者relative。
display的值是inline-block、table-cell、flex、table-caption、inline-flex。
overflow的值不是visible。

BFC 可以解决那些问题

避免垂直方向的margin合并
- 问题：垂直方向上的，两个元素margin相遇，两元素的间的距离并不等于两个margin之和。而是等于最大的margin。小的margin会被大的margin吞并。
  
  解决方法：
  1. 用一个外围块元素包裹下方元素
  2. 设置新外层元素 overflow:hidden 变成一个BFC方式的渲染区域。
  结果：下方元素的margin-top受到新外层元素的BFC渲染区域的阻隔，不会影响外部上方元素的margin-bottom。同理，外部上方的margin-bottom因为在BFC渲染区域之外，所以，也无法影响其内部的margin-top。
避免垂直方向的margin溢出
- 问题：子元素设置 margin-top,会超出父元素的范围，变成父元素的 margin-top。而实际上子元素和父元素之间，依然没有margin-top的效果不是我们想要的。解决方法：
  1. 设置新外层元素 overflow:hidden变成一个BFC方式的渲染区域。
  结果: 子元素的margin-top受到外层父元素BFC渲染区域的阻隔，不会影响父元素以外的区域。子元素的margin-top，才真正成为子元素与父元素上边的间距。
  
  其他方案： 1.为父元素添加上边框，颜色设置为透明。 2.用父元素的padding-top代替第一个子元素的margin-top。 3.在父元素内第一个子元素之前添加一个<table></table>，用平级BFC渲染区域阻隔下方元素的margin-top。 4. 父元素::before{content:"";display:table}，用平级BFC渲染区域阻隔下方元素的margin-top。

自适应两栏布局

左固定，右自适应

css 复制代码

.left{
    float:left;
    width:固定宽;
}
.right{
    overflow:hidden;
    ....
    // 变成BFC渲染区域，就不会与float:left的左侧元素发生重叠了
}

防止高度塌陷。

点赞收藏支持、手留余香、与有荣焉，动动你发财的小手哟，感谢各位大佬能留下您的足迹。

往期热门精彩推荐

面试相关热门推荐

前端万字面经------基础篇

前端万字面积------进阶篇

实战开发相关推荐

前端常用的几种加密方法

探索Web Worker在Web开发中的应用

不懂 seo 优化？一篇文章帮你了解如何去做 seo 优化

【实战篇】微信小程序开发指南和优化实践

前端性能优化实战

聊聊让人头疼的正则表达式

获取文件blob流地址实现下载功能

Vue 虚拟 DOM 搞不懂？这篇文章帮你彻底搞定虚拟 DOM

移动端相关推荐

移动端横竖屏适配与刘海适配

移动端常见问题汇总

聊一聊移动端适配

Git 相关推荐

通俗易懂的 Git 入门

git 实现自动推送

更多精彩详见：个人主页