前端面试题--元素的BFC特性和实例

1.BFC 是什么？

Block Formatting Contexts 块级格式化上下文。（不懂？ 没关系，后文有介绍。）

2.为什么需要BFC？

在传统布局中出现的问题需要一种统一的解决方案。

首先铺垫一波：

传统布局：

2.1普通流布局（normal flow）

2.1.1 内联元素水平排列

2.1.2 块级元素开启新的一行

2.2浮动流布局（float）

2.2.1 浮动元素脱离普通流布局，且向右或向左偏移，

2.2.2 与报纸的文本环绕图片类似

2.3 绝对定位布局（absolute positioning）

2.3.1 脱离普通流的层

2.3.2 绝对定位元素不会对其兄弟元素的位置造成影响

2.3.3 绝对定位元素的位置由绝对定位的坐标决定

3.如何使用BFC？

3.1 、body根元素具备BFC特性

3.2 、浮动元素（float: left|right）

3.3 、 绝对定位元素（position: absolute|fixed）

3.4 、display： inline-block|table-cells|flex

3.5 、overflow: hidden|auto|scroll

在传统布局中都会出现哪些问题，如何使用BFC 来解决问题的呢？

1、margin合并问题：

问题描述：第一个盒子的下边距和第二个盒子的上边距发生重叠

解决方法：将两个盒子分别放在用overflow:hidden触发BFC的盒子内

2.、浮动流造成的父级元素高度坍塌问题

问题描述：子元素由于浮动设置导致父元素无法识别其高度而产生的高度坍塌 问题

解决方案： clear: both清除浮动

或是父级容器触发BFC；

3.margin 塌陷的问题

问题描述：子元素设置margin-top后，父子同时设置了向上的外边距

BFC 的解决方案，在父级触发BFC；

4、浮动元素覆盖问题

问题描述：第一个元素是浮动元素，第二个元素不是浮动元素，这时浮动元素会覆盖非浮动元素

BFC 的解决办法： 第二个元素触发BFC

细心的同学肯定能察觉出来， BFC 的触发方式并不是唯一的的，在不同的场景下，我们会选择不同的触发BFC 的方式 ，来解决上述的问题；

欢迎大家积极讨论，如果大家喜欢可以关注我们JS++前端教育， 原创不易……