BFC
BFC( Block Formatting Content)块级格式化上下文。它是一个独立的渲染区域,只有Block-level box参与。一个创建了新的BFC的盒子是独立布局的,盒子里的子元素的样式不会影响到外面的元素,两个相邻元素之间的垂直距离取决于margin,即相邻块级元素垂直边距会折叠。
BFC即Block Formatting Content。首先大家知道Box即CSS布局的对象和基本单位,是盒模型,不同类型的Box会参与不同的Formatting Content,有不同的渲染方式。Formatting Content指页面中的一个渲染区域,并且拥有一套渲染规则,决定了其子元素如何定位,以及与其他元素的相互关系和作用。最常见的Formatting Content是Block Formatting Content(简称BFC)和Inline Formatting Content(简称IFC)。
BFC布局规则
- 内部的Box会在垂直方向,一个接一个的放置;
- Box垂直方向的距离由margin决定,同一个BFC的两个相邻Box的margin会折叠;
- 每个元素的margin box的左边,与包含border box的左边相接处(对于从左往右的格式化,否则相反),即使浮动也是如此;
- BFC的区域不会与float box重叠;
- BFC就是页面上的一个隔离的独立容器,容器里的子元素不会影响到外面的元素,反之亦如此;
- 计算BFC的高度时,浮动元素也参与计算。
什么导致BFC的生成?
- 根元素
- Float属性不为none
- Position为absolute或fixed
- Display为inline-block,table-cell,table-caption,flex,inline-flex
- Overflow不为visible
