BFC 又称 Block Formatting Context (块状格式化上下文)
大概意思是:BFC 是 CSS 渲染页面环节中的一部分。在块级盒子布局的范围中出现,并且它也影响着浮动元素和其他元素。
margin 塌陷
首先我们知道当在相邻的块级元素的 margin 会发生合并现象(称为:外边距折叠)
通常会发生在:相邻元素,父子元素 margin 接触处,或者一个空的块级元素。
解决办法:
- 为目标元素外新建一个父元素,并设置 overflow: hidden 属性。
2.设置inline-block; 触发BFC
浮动元素丢失高度
float
属性的元素将脱离文档流,那么包裹浮动的父级元素的高度为其中非浮动的元素,甚至直接高度“塌陷”
解决办法:
1.设置 overflow 解决,或者给父元素设置display: flow-root;
总结
不要跟面试官试图去讲解 BFC 的定义,通过举例子讲解,来说明bfc使用。