深入理解 BFC

Posted 叶子玉

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了深入理解 BFC相关的知识,希望对你有一定的参考价值。

W3C 规范中 BFC的定义:

浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的BFC(块级格式上下文)。

在BFC中,盒子从顶端开始垂直地一个接一个地排列,两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中,两个相邻的块级盒子的垂直外边距会产生折叠。

在BFC中,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说,则触碰到右边缘)。

……更多内容参考:https://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html

以上是关于深入理解 BFC的主要内容,如果未能解决你的问题,请参考以下文章

深入理解 BFC

深入理解盒模型与BFC

深入理解盒模型与BFC

深入理解系列之 float

前端重要概念

BFC 是什么?