块状格式化上下文（Block Formatting Context，BFC)
MDN对BFC的定义：是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
BFC是一个独立的渲染空间，只有块级元素参与，规定了内部元素如何布局，并且与这个区域外部的元素不相干。
触发BFC
- 根元素(html)
- 浮动元素(float不为none)
- 绝对定位元素(元素的position为absolute或fixed)
- 行内块元素(display为inline-block)
- 表格相关元素(display为table-cell，table-caption，table，table-row, table-row-group, table-header-group, table-footer-group或inline-table)
- overflow不为visible的元素
- display为flow-root(The value name of
flow-rootmakes sense when you understand you are creating something that acts like therootelement (<html>element in browser) in terms of how it creates a new context for the flow layout inside it.) - 弹性元素(display为flex或inline-flex元素的直接子元素)
- 网格元素(display为grid或inline-grid元素的直接子元素)
- 多列容器(元素的column-count或column-width不为auto，包括column-count为1), column-span为all的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中
- contain值为layout、content或paint的值
布局规则
- 在一个BFC中，块盒与行盒都会垂直的沿着其父元素的边框排列
- 垂直方向的距离由margin来决定，属于同一个bfc中的两个相邻的元素的上下margin会重叠
- 每一个元素的margin-left和父元素的border-left相接触
- bfc的区域不会和浮动区域相重叠
- bfc和区域外部的元素不相干
- 在计算bfc高度时，浮动元素也会参与计算
- 浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其他BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距重叠也只会发生在属于同一BFC的块级元素之间
BFC可以做什么呢？
包含浮动，清除父元素高度塌陷问题
浮动元素会脱离文档流（绝对定位也会）。如果一个没有高度或者height是auto的容器的子元素是浮动的，则该容器的高度是不会被撑开的。BFC能包含浮动，也能解决容器高度不会被撑开的问题。
避免外边距重叠
BFC产生外边距折叠要满足一个条件：两个相邻元素要处于同一个BFC中。所以，若两个相邻元素在不同的BFC中，就能避免外边距折叠。
使用BFC可以实现两栏布局，一侧元素浮动，另一侧触发BFC
在多列布局中使用BFC
如果我们创建一个占满整个容器宽度的多列布局，在某些浏览器中最后一列有时候会掉到下一行。这可能是因为浏览器四舍五入了列宽从而所有列的总宽度会超出容器。但如果我们在多列布局中的最后一列里创建一个新的BFC，它将总是占据其他列先占位完毕后剩下的空间。因为bfc的区域不会和浮动区域相重叠
原文地址：https://www.cnblogs.com/jett-woo/p/11838883.html
时间： 2024-11-08 11:04:44