资讯专栏INFORMATION COLUMN

BFC 的简单理解

Faremax / 2603人阅读

BFC 的扩写是 Block formatting contexts (块级格式化上下文),它看不见摸不着但对 CSS 盒模型有影响。
标准里对 BFC 的描述是:

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with "overflow" other than "visible" (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

同时提到一个前端常见的 collapse 现象:

Vertical margins between adjacent block-level boxes in a block formatting context collapse.

所以笔者是这么理解 BFC 的:

浮动元素、绝对定位元素、非块盒的块容器(inline-block、table-cell、table-caption 元素)、overflow 不为 visible 的元素会创建 BFC

同一个 BFC 里,两个相邻的块级盒的垂直外边距会 collapse(塌陷)

也就是说不同的 BFC之间就会消除相邻元素的 collapse,以下是可创建 BFC 的条件:

div: float:left | right

div: display:inline-block | table-cells | table-captions

div: position:absolute

div: overflow:hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls | fragments

这里写了个测试 collapse 的 demo,经测试发现:

“同一个 BFC 里,两个相邻的块级盒”可以指相邻元素如 div-2 和 div-3,也可以指父元素和子元素如 div-1 和 div-2 或 3

设置 overflow 时,只能让 div-1 与它的子元素 div-2 或 3 消除 collapse,而不能让 div-1 与相邻元素 div-4 消除 collapse

参考:BFC 的文档
原文:BFC 的简单理解

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/112464.html

相关文章

  • 浅析BFC

    摘要:原文链接说起其实有点像闭包在大多数人印象中的感觉,平时都用过,但在不了解定义的情况下大多数人却又不知道这就是。这种行为只存在于兄弟元素在同一下这种情形。上文提到的可以看下大漠的这篇文章参考理解布局和分钟理解原理 原文链接: Fyerls Blog 说起 BFC 其实有点像闭包在大多数人印象中的感觉,平时都用过,但在不了解定义的情况下大多数人却又不知道这就是 BFC。之所以会想了解下什么...

    voyagelab 评论0 收藏0
  • 浅析BFC

    摘要:原文链接说起其实有点像闭包在大多数人印象中的感觉,平时都用过,但在不了解定义的情况下大多数人却又不知道这就是。这种行为只存在于兄弟元素在同一下这种情形。上文提到的可以看下大漠的这篇文章参考理解布局和分钟理解原理 原文链接: Fyerls Blog 说起 BFC 其实有点像闭包在大多数人印象中的感觉,平时都用过,但在不了解定义的情况下大多数人却又不知道这就是 BFC。之所以会想了解下什么...

    My_Oh_My 评论0 收藏0
  • 关于CSS中设置overflow属性值为hidden相关理解

    摘要:非根元素,且其属性是和的元素的包含块它的包含块是由最近的祖先块容器盒的内容区域创建的。如何触发只需要保证满足下面至少一条就会触发根元素设置了值不为的元素设置了属性不为的元素设置了属性不为和的元素设置了的值为和中的任何一个的元素。 作者:心叶时间:2018-04-18 17:53 包裹元素剪裁条件 是不是包裹元素overflow设置为hidden以后,内部元素如果超过包裹元素的话就会被剪...

    codercao 评论0 收藏0
  • 理解 CSS 布局和 BFC

    摘要:布局中有一些概念,一旦你理解了它们,就能真正提高你的布局能力。我们通常有两种方法来解决这个布局问题。是布局中的一个迷你布局你可以将看作是页面内的一个迷你布局。理解浏览器如何布置网页是非常基础的。 CSS布局中有一些概念,一旦你理解了它们,就能真正提高你的 CSS 布局能力。本文是关于块格式化上下文(BFC)的。你可能从未听说过这个术语,但是如果你曾经用CSS做过布局,你可能知道它是什么...

    miya 评论0 收藏0
  • BFC规范理解

    摘要:垂直方向的距离由决定。属于同一个的两个相邻的会发生叠加,与方向无关。计算的高度时,浮动子元素也参与计算。形成后出现的常见问题重叠问题浮动相关问题可以解决的问题叠加的问题,要阻止重叠,只要将俩个元素别放在一个中即可。 1. 什么是BFC BFC(block formatting context):块级格式化上下文。简单来说它就是一种会影响元素与元素之间的位置、间距的属性。 2. 如何触...

    pingan8787 评论0 收藏0

发表评论

0条评论

Faremax

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<