BFC初步整理

前言

BFC是一套渲染机制，是指内容会显示到容器里面，而不是到容器外面。相当于在元素外面创建一堵墙，让元素内外的的内容不会互相影响。

BFC概念解释

官方的解释是块级格式化的上下文，主要是指在渲染的过程中形成块级的盒子状的渲染区域，包括本身以及间距等。在整个的渲染过程中，不会互相影响的原则。

• MDN概念解读

触发BFC的方式

以下列举的为常规的BFC的创建方式： – overflow:hidden,不为visible即可 – position值不为static,relative – float值不为none – display: table-cell table-caption inline-block,flex

参考文档

• 学习BFC
• css中的BFC