神奇的BFC

GraphQuery 发布于2019-08-29 15:07 / 826人阅读

摘要：垂直方向的距离由决定。根据布局规则第四条的区域不会与重叠。因此会根据包含块的宽度，和的宽度，自动变窄。效果如下清除内部浮动根据布局规则第六条计算的高度时，浮动元素也参与计算。

概念

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

生成BFC的元素

根元素

float属性不为none

position为absolute或fixed

display为inline-block, table-cell, table-caption, flex, inline-flex

overflow不为visible

布局规则

内部的Box会在垂直方向，一个接一个地放置。

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

BFC的区域不会与float box重叠。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

计算BFC的高度时，浮动元素也参与计算

实例 自适应两栏布局

根据“每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。”，所以元素布局如下：

虽然存在浮动的元素aslide，但main的左边依然会与包含块的左边相接触。

根据BFC布局规则第四条：BFC的区域不会与float box重叠。我们可以通过通过触发main生成BFC，来实现自适应两栏布局。当触发main生成BFC后，这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度，和aside的宽度，自动变窄。效果如下：

.main {
    overflow: hidden;
}

清除内部浮动

根据BFC布局规则第六条：计算BFC的高度时，浮动元素也参与计算。为达到清除内部浮动，我们可以触发par生成BFC，那么par在计算高度时，par内部的浮动元素child也会参与计算。

.par {
    overflow: hidden;
}

效果如下：

GPU云服务器云服务器神奇的网站一个神奇的网站幻云我的世界神奇宝贝服务器我的世界神奇宝贝幻云服务器

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

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

BFC 神奇背后的原理（转）

摘要：最常见的有简称和简称。根据布局规则第四条的区域不会与重叠。根据布局规则第二条垂直方向的距离由决定。同样的，当内部有浮动时，为了不影响外部元素的布局，计算高度时会包括浮动的高度。避免重叠也是这样的一个道理。 BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。虽然我知道如何利用 BF...

April 2019-08-29 12:56 评论0 收藏0
BFC 神奇背后的原理（转）

摘要：最常见的有简称和简称。根据布局规则第四条的区域不会与重叠。根据布局规则第二条垂直方向的距离由决定。同样的，当内部有浮动时，为了不影响外部元素的布局，计算高度时会包括浮动的高度。避免重叠也是这样的一个道理。 BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。虽然我知道如何利用 BF...

wawor4827 2019-08-01 17:07 评论0 收藏0
CSS：BFC 最熟悉的陌生人

摘要：就是神奇之一，它也是最熟悉的陌生人，因为你一不小心就会触发它然而你并没有意识到它正在神奇地发挥作用。最常见的有和，中还增加了和，这里就不深入研究了。其根本原理就是它们处于同一个，符合属于同一个的两个相邻元素的会发生重叠的规则。 BFC，你也许听过这个词，但是你可能不是很有底气地解释清楚。写样式的时候，往往加了一个样式或者改了一个属性，就能达到你期望的效果，一切都是如此地神奇。BFC就是...

focusj 2019-08-29 13:28 评论0 收藏0
BFC

摘要：垂直方向的距离由决定。属于同一个的两个相邻的会发生重叠每个元素的的左边，与包含块的左边相接触对于从左往右的格式化，否则相反。的区域不会与重叠。计算的高度时，浮动元素也参与计算。剩下的一点间隙是的。当给形成一个，的高度就被撑开了。前端精选文摘：BFC 神奇背后的原理小科普：到底什么是 BFC、IFC、GFC 和 FFC 一：BFC (Block Formatting Context)定...

spacewander 2019-08-29 17:14 评论0 收藏0
BFC--margin折叠和清除浮动

摘要：背景以前在写和的时候，两个都设置了不同的上下值。它是决定块盒子的布局及浮动元素相互影响的一个因素。创建根元素绝对定位元素为或的值不为的值为的值不为折叠属于同一个的两个相邻的会发生折那如何阻止折叠呢，只要将其中一个创建新的就行了。背景以前在写html和css的时候，两个div都设置了margin不同的上下值。写完后我开心的打开页面，为毛两个应该隔的比较开的div，距离并不是我设置的m...

zhangfaliang 2019-08-30 13:09 评论0 收藏0