前端面试中的 BFC使用

BFC 又称 Block Formatting Context （块状格式化上下文）
大概意思是：BFC 是 CSS 渲染页面环节中的一部分。在块级盒子布局的范围中出现，并且它也影响着浮动元素和其他元素。

margin 塌陷

首先我们知道当在相邻的块级元素的 margin 会发生合并现象（称为：外边距折叠）

通常会发生在：相邻元素，父子元素 margin 接触处，或者一个空的块级元素。


解决办法：

1. 为目标元素外新建一个父元素，并设置 overflow: hidden 属性。
   
   
   2.设置inline-block; 触发BFC
   

浮动元素丢失高度

float 属性的元素将脱离文档流，那么包裹浮动的父级元素的高度为其中非浮动的元素，甚至直接高度“塌陷”


解决办法：
1.设置 overflow 解决,或者给父元素设置display: flow-root;

总结

不要跟面试官试图去讲解 BFC 的定义，通过举例子讲解，来说明bfc使用。