块格式化上下文(bfc )格式是指网页中长方体模型布局的CSS渲染模式下的独立渲染区域或独立容器。 (我理解的是,触发bfc的元素会偏离文档的流程。 也就是说,其他要素将看不到它)
脱离文档流:当元素脱离文档流时,文档流中的空间将消失,并进入浮动状态。 也就是说,它被认为漂浮在文档流之上。 离开文档流的元素将根据常规文档流定位。 即使一个元素离开文档流,文档流中的其他元素也会忽略该元素并填充原始空间。
触发bfc的条件
1、浮动元素、浮点非数值;
2、定位元素,位置(absolute,fixed );
3、display为以下值之一: inline-block、table-cell、table-caption;
4、溢出的可见性以外的值(隐藏、自动、滚动);
BFC的特性
1 .内部包厢垂直摆放。
2 .垂直方向的距离由margin决定
3.bfc的区域不与浮动的要素区域重叠。
4 .计算bfc高度时,浮动元素也参与计算
5.bfc是页面上的独立容器,容器中的子元素不影响外部元素。