概述
BFC 是 block formatting context 的缩写，中文翻译是块级格式化上下文。其渲染区域用 formatting context表示，它决定了其子元素将如何定位，以及和其它元素的关系和相互作用。在文档流中的盒子要么属于块级格式化上下文，要么属于内联格式化上下文。
常见的生成BFC的方法有以下几种：
- 设置元素的 float 属性为 right 或 left
- 设置元素的 overflow 属性为 hidden 或 auto
- 设置元素的 position 属性为 absolute 或 fix 或 粘性定位
- 设置元素的 display 属性为 flex 或 inline-block 或 inline-flex
- html 根元素
作用
- 包含浮动元素，清除浮动，解决容器高度坍塌问题（建议使用 clear 属性, 清除浮动）
- 解决外边距合并问题
- 解决父子外边距合并；
- 解决在相邻盒子外边距合并问题：
当盒子属性的 overflow 的值为 hidden 或 auto 并不能解决外边距合并的问题，相反 display 属性的值为 inline-block 或 float 的属性为 right 或 left 时可以解决边距合并的问题
网友评论