一、盒子模型
要理解BFC与IFC,首先要理解盒子模型,盒模型的结构如下:
从内到外依次为 content -> padding -> border -> margin
常见的盒模型氛围两种:标准盒模型和IE盒模型,我们可以用 box-sizing 属性进行切换
标准盒模型: box-sizing: content-box;
IE盒模型:box-sizing: border-box;
二、BFC和IFC
1.简要概括
- Block level的box会参与形成BFC:例如display值为block/ list-item/ table
- Inline level的box会参与形成IFC:比如 display值为inline/ inline-table/ inline-block
2.FC(Formatting Context)
格式化上下文。定义的是页面中的一块渲染区域,并且有一套渲染规则。它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。
3.解释
BFC(Block Formatting Contexts) 块级格式化上下文
块级格式化上下文是页面上的一块渲染区域,这块区域由符合条件的容器产生。容器内的子元素会由块盒子和浮动元素按如下规则排列:
- 纵向一个挨着一个排列
- 两个盒子的纵向间距由margin属性决定,两个相邻的盒子在垂直方向上的margin会有种“重叠合并”的效果,此时纵向间距距离取较大的那个margin值
IFC(Inline Formatting Contexts)行内格式化上下文
行内格式化上下文的布局首先要根据水平、垂直和左右书写模式来讨论:
- 在水平书写模式writing-mode: hortizontal-tb下,盒子会在水平方向上从左到右排列,空间不够时换到下一行继续。
- 在垂直书写模式下writing-mode: vertical-rl | vertical-lr,盒子会在垂直方向上从上到下排列,空间不够时换到下一行继续。只是这里的“下一行”有左右之分。
- writing-mode: vertical-rl时就像古代人书写以及日本台湾书籍的格式一样,从右到左排列。
- writing-mode: vertical-lr则是从左到右排列。
每“行”在浏览器中会被作为一个盒子处理,这个盒子叫行框(line box)。它的高度由其包含行内元素的最低位置到最高位置(不包含margin
)计算而来。因为考虑盒子间对齐处理的关系,这个值可能会比行内最高的元素要高。
三、布局规则
IFC布局规则:
- 在行内格式化上下文中,boxes一个接一个地水平排列,起点是包含块的顶部。
- 水平方向上的margin border padding在框之间得到保留
- 在垂直方向上可以以不同的方式对齐:顶部或底部对齐,或者根据文字的基线对齐
BFC布局规则:
- 内部的Box会在垂直方向,一个接一个地放置
- Box垂直方向上的距离由margin决定,同属一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的左外边缘(margin-left),与包含块的左边(contain box left)相接触(对于从左到右的格式化)。即使存在浮动也是如此,除非这个元素自己形成一个新的BFC
- BFC的区域不会与float box重叠
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素
- 计算BFC的高度时,浮动元素也参与计算
四、如何产生BFC
当一个HTML元素满足下面条件的任何一点,都可以产生Block Formatting Context:
1. float的值不为none
2. overflow的值不为visible
3. display的值为table-cell, table-caption, inline-block中的任何一个
4. position的值不为relative和static
CSS3触发BFC方式则可以简单描述为:在元素定位非static,relative的情况下触发,float也是一种定位方式
五、BFC的作用与特点
- 清除外部浮动
- 不和浮动元素重叠
- 阻止浮动元素覆盖
清除浮动:当父盒子div未设置高度,子盒子都设置浮动,则父元素会出现高度塌陷的情况。
解决方案:给父元素添加overflow:hidden,使其形成BFC,计算高度时会计算float元素的高度,达到清除浮动影响的效果。
布局:自适应两栏布局。
六、FFC
自适应格式化上下文
- display值为flex或者inline-flex的元素会自动生成自适应容器。
- 设置为flex的容器会被渲染成一个块级元素,而设置为inline-flex的元素会被渲染成一个行内元素,容器外的元素和容器内的子元素不受影响。
七、GFC
网格格式化上下文
- display:gird产生,与flex相似,flex元素相对于轴线布局,gird里面可以放多个项目,是一个二维的表格。
- 产生行和列,每个元素指定在“单元格”,比flex更大