BFC

spacewander 发布于2019-08-29 17:14 / 1411人阅读

摘要：垂直方向的距离由决定。属于同一个的两个相邻的会发生重叠每个元素的的左边，与包含块的左边相接触对于从左往右的格式化，否则相反。的区域不会与重叠。计算的高度时，浮动元素也参与计算。剩下的一点间隙是的。当给形成一个，的高度就被撑开了。

前端精选文摘：BFC 神奇背后的原理
小科普：到底什么是 BFC、IFC、GFC 和 FFC

一：BFC (Block Formatting Context)定义

BFC 全称 Block Formatting Context，翻译块级格式化上下文。BFC 可以看作是隔离了的独立容器（渲染区域），容器里面的元素不会在布局上影响到外面的元素，相当于建立一个隐形的边界

前提：每个渲染区域用formatting context表示，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。在正常流中的盒子要么属于块级格式化上下文，要么属于内联格式化上下文。

二、BFC 的产生

根元素；

float属性不为none；

position为absolute或fixed；

display为inline-block, flex, 或者inline-flex；

overflow不为visible（可视的）；

三、特性

BFC（块级格式化上下文）对块级元素在渲染的过程中遵循布局的规则：
1、内部的Box会在垂直方向，一个接一个地放置。

2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

3、BFC的区域不会与float box重叠。
4、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
5、计算BFC的高度时，浮动元素也参与计算。　

四、应用

1、margin 合并

下图1 header和body之间出现较大间隙的原因是：h1里面有外边距，和header的外边距合并了

但给header构建一个BFC之后，外边距就不合并了。剩下的一点间隙是body的margin。

把body的margin取消之后，间隙就消失了

总结：（1）构建BFC是阻止外边距合并的方法之一(虽然加边框和padding也可以实现外边距合并)

（2）使用overflow：hidden，超出内容会被隐藏，所以使用要慎重

2、contain float，包裹浮动元素
先设置li为浮动，可以发现nav的高度是没有被撑开的。

当给nav形成一个bfc，nav的高度就被撑开了。计算BFC高度的时候，是包括浮动元素的

也可以通过浮动，来形成BFC.但如果只是为了撑开父元素，设置浮动是很不明智的。

GPU云服务器云服务器 bfc bfc布局

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

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

CSS BFC特性(块级格式化上下文)

摘要：元素的特性全称为，中文为块级格式化上下文。应用之利用特性解决塌陷问题塌陷是一般指在标准文档流中，两个垂直排列的元素，一设置个，另一个设置，此时两个元素的就会发生重叠。 1、元素的BFC特性 BFC全称为Block Formartting Context，中文为块级格式化上下文。它是页面中的一块独立的渲染环境，并且有一套渲染规则，它决定了其子元素将如何定位，以及它和其他兄弟元素的关系和相...

岳光 2019-08-30 15:55 评论0 收藏0
CSS BFC特性(块级格式化上下文)

摘要：元素的特性全称为，中文为块级格式化上下文。应用之利用特性解决塌陷问题塌陷是一般指在标准文档流中，两个垂直排列的元素，一设置个，另一个设置，此时两个元素的就会发生重叠。 1、元素的BFC特性 BFC全称为Block Formartting Context，中文为块级格式化上下文。它是页面中的一块独立的渲染环境，并且有一套渲染规则，它决定了其子元素将如何定位，以及它和其他兄弟元素的关系和相...

chanthuang 2019-08-02 14:09 评论0 收藏0
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

摘要：中有个重要的概念，搞懂可以让我们理解中某些原本诡异的地方。简介在解释之前，先说一下文档流。我们常说的文档流其实分为定位流浮动流普通流三种。使用包含浮动元素注意，这里触发并不能阻止其它形式的脱离文档流的元素覆盖正常流元素。 CSS中有个重要的概念BFC，搞懂BFC可以让我们理解CSS中某些原本诡异(??)的地方。 1. 简介在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位...

plus2047 2019-08-29 14:20 评论0 收藏0
# 是的，是你的BFC - CSS中常用

摘要：根据布局规则第四条的区域不会与重叠。因此会根据包含块的宽度，和的宽度，自动变窄。根据布局规则第二条垂直方向的距离由决定。同样的，当内部有浮动时，为了不影响外部元素的布局，计算高度时会包括浮动的高度。避免重叠也是这样的一个道理。 CFC 全称：(Block Formatting Contexts)含义是块级格式化上下文)，就是一个块级元素的渲染显示规则一、简易理解.定义可以把 BF...

Cruise_Chan 2019-08-02 16:17 评论0 收藏0