格式化上下文

格式化上下文: 页面中的一块渲染区域,同一个格式化上下文内和不同格式化上下文之间的定位方式都会化生变化; 分为块级格式化上下文(BFF: Block Formatting Contexts)和内联格式化上下文(IFC: Inline Formatting Contexts)

BFC形成条件:
满足一下任一条件即可创建一个新的BFC
根元素
脱离普通文档流的元素(float absolute fixed)
非块级元素 display: inline-block table flex ...
overflow不为visible

BFC影响:
同一个BFC内的相邻块级元素垂直方向边距会发生折叠, 边距取决于两个元素的最大边距
BFC是页面上隔离的独立容器,内部元素不会与外部元素相互影响
在计算BFC高度时, 内部浮动的元素也会被计算在内

IFC的形成
当多个内联(块级)元素排列在一起的时候会形成IFC, 这些元素之间不能穿插块级元素,否则会被切分为多个IFC
IFC影响:
一个IFC内的元素都是水平排列的
横向的margin、border、padding属性对于这些元素都是无效的
垂直方向上可以调整对其方式

你可能感兴趣的:(格式化上下文)