BFC-块格式化上下文（block formatting context）

keithyau 发布于2019-08-29 16:07 / 2164人阅读

摘要：概念块格式化上下文，是页面块级元素布局及浮动元素彼此交互的区域。阻止相邻元素外边距合并的方法被非空内容或分隔开。不在一个普通流中或用分割开。让在垂直方向上不毗邻。

BFC概念

BFC（block formatting context）块格式化上下文，是Web页面块级元素布局及浮动元素彼此交互的区域。BFC是一个独立的布局环境，（实际页面渲染时是不可见的），由BFC构建的区域其内部元素的布局是不受外界的影响的，利用这个特性可用来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。在BFC中元素从顶端开始垂直地一个接一个地排列，两个元素之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级元素的垂直外边距会产生折叠。（后面详细解释）

形成BFC的条件：

1.浮动、绝对定位、fixed定位，这些方式都能让元素脱离文档流形成独立的BFC。
2.display:inline-block/table-cells/table-captions/inline-flex（非块级元素的块容器元素）
3.overflow:auto/hidden/scroll
overflow属性本身并没有什么特别之处，但是是会产生BFC创造独立布局环境，使元素不受浮动元素的影响。

使用BFC清除浮动效果示例：

BFC的作用：

1.清除浮动带来的副作用（将浮动限定在BFC区域中）
2.撑开父元素（包住浮动元素）清除浮动就是撑开父元素
3.阻止外边距合并
4.BFC独立性可用来布局

关于margin合并 margin合并出现的三个场景：

1.同一个BFC环境中，处于普通文档流中的垂直相邻元素的外边距合并。

2.父子元素的外边距合并。

3.空元素自身的外边距合并。

如果这个外边距遇到另一个元素的外边距，它还会发生合并

margin合并规则：

1.两个margin都是正值的时候，取两者的最大值；
2.当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从0位置，负向位移；
3.当有正有负的时候，先取出负 margin 中绝对值中最大的，然后和正 margin 值中最大的 margin 相加。
所有毗邻的margin要一起参与运算，不能分步进行。

阻止相邻元素外边距合并的方法：

1.被非空内容、padding、border 或 clear 分隔开。
2.不在一个普通流中或用BFC分割开。
3.让margin在垂直方向上不毗邻。

云服务器 GPU云服务器 format时间格式 linux给整块磁盘格式化 linux格式化整块硬盘 linux 格式化整块硬盘

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

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

BFC原理详解

摘要：最常见的有简称和简称。可以把它理解成是一个独立的容器，并且这个容器的里的布局，与这个容器外的毫不相干。根据布局规则第二条垂直方向的距离由决定。参考前端精选文摘神奇背后的原理之详解深入理解流体特性和特性下多栏自适应布局布局一.BFC是什么在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。 1.BOX：CSS布局的基本单位 Box是CSS布局的...

ziwenxie 2019-08-29 11:10 评论0 收藏0
关于BFC的总结

摘要：虽然工作这么多年了，但是如果让我直接解释一下什么是的时候，还是感觉有点不知道怎么准确的表达，下面就翻翻文档，总结一下，加深一下认识吧。两个兄弟盒之间的垂直距离由属性决定。最常见的有简称和简称。虽然工作这么多年了，但是如果让我直接解释一下什么是BFC的时候，还是感觉有点不知道怎么准确的表达，下面就翻翻文档，总结一下，加深一下认识吧。大家也可以关注我的GitHub后续的更新 1.BFC...

chadLi 2019-08-29 15:27 评论0 收藏0
关于BFC的总结

摘要：虽然工作这么多年了，但是如果让我直接解释一下什么是的时候，还是感觉有点不知道怎么准确的表达，下面就翻翻文档，总结一下，加深一下认识吧。两个兄弟盒之间的垂直距离由属性决定。最常见的有简称和简称。虽然工作这么多年了，但是如果让我直接解释一下什么是BFC的时候，还是感觉有点不知道怎么准确的表达，下面就翻翻文档，总结一下，加深一下认识吧。大家也可以关注我的GitHub后续的更新 1.BFC...

oneasp 2019-08-02 10:28 评论0 收藏0
前端进阶之什么是BFC？BFC的原理是什么？如何创建BFC？

摘要：官方说法就是它规定了用户端在媒介中如何处理文档树。是的包含块，同时又是的包含块，不是绝对的。因此称为匿名盒子。行内盒子行内级元素会生成行内级盒子，该盒子同时会参与行内格式化上下文的创建。如果只有一个值指定为，则其使用的值来自相等。作者：陈大鱼头 github： KRISACHAN 盒模型 The CSS box model describes the rectangular b...

lowett 2019-08-30 15:44 评论0 收藏0
块格式化上下文(Block formatting contexts)

摘要：浮动，绝对定位元素，非块盒的块容器例如，，和和不为的块盒当该值已被传播到视口时除外会为它们的内容建立一个新的块格式化上下文布局规则内部盒会在垂直方向一个接一个的放置盒的垂直方向的距离由决定属于同一个的两个相邻盒子的会发生重叠每个元素的浮动，绝对定位元素，非块盒的块容器（例如，inline-blocks，table-cells和table-captions）和overflow不为vis...

jerry 2019-08-29 12:30 评论0 收藏0