我要招人

去企业版

首页 > 试题广场 >

对BFC规范的理解

[问答题]

对BFC规范的理解？

WEBING123

一、BFC的概念

1.规范解释

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

2.通俗理解

BFC是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。
如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。
浮动元素会创建BFC，则浮动元素内部子元素主要受该浮动元素影响，所以两个浮动元素之间是互不影响的。

阅读全文：前端面试题-BFC(块格式化上下文)

发表于 2018-03-11 12:20:29 回复(0)

小白萌萌哒

形成BFC:1.float的值不为none。

2.overflow的值不为visible。

3.display的值为table-cell, table-caption, inline-block中的任何一个。

4.position的值不为relative和static。

BFC的规则:

BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

发表于 2015-08-26 21:39:15 回复(1)

吉

触发BFC的方法：

float 元素
position（absolute，fixed）
display (table-cell，table-caption，inline-block)
overflow 除了visible 以外的值（hidden，auto，scroll ）
fieldset元素
早期IE的hasLayout会触发一个新的block formatting context

BFC的特性

边缘不和浮动元素重叠
不存在collapsing margins问题

第一个特性特别有用，因为元素触发了BFC的话，就不会被float元素覆盖，当子元素全部浮动的时候也能够正确地包含了
第二个margin不会叠加的特性，可以理解为两个处于普通流的盒子，会有margin叠加的问题，是因为他们属于相同的BFC，当他自身创建了一个新的BFC时，这个问题就不存在了

发表于 2017-02-23 15:11:46 回复(0)

牛客好运好运🙏

BFC的通俗理解：BFC是一个独立的布局环境，可以理解为一个容器，在这个容器里的物品按一定的规则摆放，但是不会影响其他环境的物品。BFC的元素布局是不受外界影响的，我们往往利用这个特性来消除浮动元素对其非浮动兄弟元素或者子元素的影响。

触发BFC的方法：

1、根元素

2、float：不为none

3、position：absolute/ fixed

4、display：table-call/table-caption/inline-block

5、overflow：hidden/auto/scroll

编辑于 2021-08-02 16:17:24 回复(0)

孤独的聚能环

BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个 BFC 中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的 margin 会发生折叠。

W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。

发表于 2015-07-27 12:23:38 回复(1)

Candy_air

http://www.aiweibang.com/yuedu/19240171.html

发表于 2016-04-11 17:23:25 回复(0)

南乔可休

BFC指的是块级格式化上下文，一个BFC是一个独立的区域，这个区域里边元素的布局不会影响到外部。满足下列的一个或多个条件，就可以创建一个BFC： 1.float的值不是none，也即，浮动元素是个BFC； 2.position的值不是static或relative 3.display的值是inline-block,table-cell,flex,table-caption,或者inline-flex 4.overflow的值不是visible

发表于 2019-10-26 17:27:58 回复(0)

牛客418069748号

独立的渲染空间区域

发表于 2021-03-01 14:06:42 回复(0)

伯爵213

bfc 块级格式化上下文bfc里面的元素样式的改变不会影响到外部元素的布局内部的元素会从左到右从上到下，依次排列，呲林块级元素在有margin 重叠的问题 overflow 不为visiable float不为none、display为inline-block，table-cell，table-caption，position不为relative或static

编辑于 2020-09-11 16:12:05 回复(0)

努力赚钱的小曾

块级格式化上下文构建一个作用域，里面的元素不受外界干扰position不为static浮动displayoverflow等

发表于 2020-08-29 15:59:24 回复(0)

太阳煮的酒

BFC块级格式化上下文

一个创建了BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响外面元素；在同一个BFC中两个相邻的块级盒垂直方向的margin会发生折叠

发表于 2019-10-16 10:33:46 回复(0)

牛客4846696号

float 的值不为 none position 的值不为 static 或 relative display 的值为 table-cell、table-caption、inline-block、flex 或 inline-flex overflow 的值不为 visiable

发表于 2017-09-27 09:26:08 回复(0)

提交观点

问题信息

HTML

上传者：孤独的聚能环

难度：

12条回答 693收藏 10752浏览

对BFC规范的理解

一、BFC的概念

1.规范解释

2.通俗理解

触发BFC的方法：

问题信息

热门推荐

相关试题