FC
全称Formatting Context格式化上下文,元素在标准流里都是属于一个FC的。
块级元素的布局属于Block Formatting Context(BFC):block level box都是在BFC中布局的。
行内级元素的布局属于Inline Formatting Context(IFC):inline level box都是在IFC中布局的。
BFC
MDN
是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。
有如下特点:
- 在BFC中,box会在垂直方向上一个挨着一个的布局
- 垂直方向的间距由margin决定
- 在同一个BFC中,相邻两个box之间的margin会折叠(垂直方向)
- 在BFC中,每个元素的左边缘是紧挨着包含块的左边缘的
可以利用以上特点解决两个问题:
- 解决margin折叠问题,这一点没什么好说的,通过第二个特点就知道让折叠的两个元素属于不同的BFC即可。
- 解决浮动高度塌陷问题
解决浮动高度塌陷
BFC解决高度塌陷需要满足两个条件:
- 浮动元素的父元素触发BFC,形成独立的BFC。
- 浮动元素的父元素的高度是auto
BFC的高度是auto的情况下,按一下方法计算高度:
- 如果只有inline-level,是行高的顶部和底部的距离;
- 如果有block-level,是由最底层的块上边缘和最底层块盒子的下边缘之间的距离;
- 如果有绝对定位元素,将被忽略;
- 如果有浮动元素,那么会增加高度以包括这些浮动元素的下边缘;
以下情况会创建BFC
- 根元素()
- 浮动元素(元素的 float 不是 none)
- 绝对定位元素(元素的 position 为 absolute 或 fixed)
- 行内块元素(元素的 display 为 inline-block)
- 表格单元格(元素的 display 为 table-cell,HTML表格单元格默认为该值)
- 表格标题(元素的 display 为 table-caption,HTML表格标题默认为该值)
- 匿名表格单元格元素(元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group(分别是HTML table、row、tbody、thead、tfoot 的默认属性)或 inline-table)
- overflow 计算值(Computed)不为 visible 的块元素
- display 值为 flow-root 的元素
- contain 值为 layout、content 或 paint 的元素
- 弹性元素(display 为 flex 或 inline-flex 元素的直接子元素)
- 网格元素(display 为 grid 或 inline-grid 元素的直接子元素)
- 多列容器(元素的 column-count 或 column-width(en-US) 不为 auto,包括 column-count 为 1)
- column-span 为 all 的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中(标准变更,Chrome bug)。
参考
coderwhy的课件分享