说一说BFC__牛客网

huaxifn

【什么情况下可以让元素产生BFC】 1、float属性不为none 2、position为absolute或fixed 3、display为inline-block、table-cell、table-caption、flex、inline-flex 4、overflow不为visible 【BFC元素具有的特性】 1、在BFC中，盒子从顶部开始垂直地一个接一个排列 2、盒子垂直方向的距离由margin决定。同一个BFC的两个相邻盒子margin会重叠 3、BFC中，margin-left会触碰到border-left（对于从左至右的方式，反之） 4、BFC区域不会与浮动的盒子产生交集，而是紧贴边缘浮动 5、计算BFC高度时，自然会检测浮动的盒子高度【主要用途】 1、清除内部浮动，父元素设置为BFC可以清除子元素的浮动（最常用overflow:hidden，IE6需加上*zoom:1）：计算BFC高度时会检测浮动子盒子高度 2、解决外边距合并问题 3、右侧盒子自适应：BFC区域不会与浮动盒子产生交集，而是紧贴浮动边缘

发表于 2022-04-28 08:49:13 回复(5)

牛客526141857号

1.定义：块级格式化上下文，独立的渲染区域，不会影响边界外的元素 2.形成条件： a.flaot b.position 3. overflow 4.display 3.布局规则： a.区域内box从上到下排列 b.box垂直方向的距离由margin决定 c.同一个bfc内box margin会重叠 d.bfc不会与flaot重叠 e.bfc计算高度也会计算float元素

发表于 2022-04-16 16:24:26 回复(3)

已注销

1. 定义：块级格式化上下文，独立的渲染区域，不会影响边界外的元素 2. 形成的条件：a.浮动 b. 非静态定位，c. overflow:hidden d. display:table 3. 解决的问题：a. 浮动元素重叠 b. 父元素高度塌陷 b. margin重叠

发表于 2022-04-21 17:41:44 回复(1)

恩恩讷

是KFC的爹

发表于 2022-10-14 20:41:18 回复(0)

龙，愛してる，♥

BFC块级格式化上下文是wed页面中一块独立的渲染区域不会影响周围的元素开启BFC的条件 float 设置为left right position设置为absolute fixed overflow设置为auto hidden scoll display设置为flex inline-block等虽然开启BFC的方式都可以清除浮动但常用的也只有overflow:hidden 应为为父级元素设置float position父级元素会脱离文档流会对周边兄弟元素造成影响所有常用的就只有overflow hidden

发表于 2022-06-06 20:40:17 回复(0)

牛客839406722号

【什么情况下可以让元素产生BFC】 1、float属性不为none 2、position为absolute或fixed 3、display不为none 4、overflow不为visible 作用： 1、避免margin重叠 2、清除浮动

发表于 2022-06-14 18:00:31 回复(0)

明清月风

当协议、域名、端口不同时，就会导致跨域问题； cors解决，access-control-allow-origin：* jsonp解决

发表于 2022-05-18 00:20:08 回复(0)

崔啟阳

定义：块级格式上下文特点：是一个独立的容器，内部的元素和外部元素互不影响。形成：根元素、float、position不为relative、display不为none、overflow。解决的问题：清除浮动、解决塌陷问题

发表于 2022-04-27 11:07:30 回复(0)

牛客729142789号

块级格式上下文，独立的渲染区域，不会影响到边界以外的区域。触发条件：1\float,2\overflow:除了visible都会触发，3、position:fixed,absolute,4\display:inline-block,flex。用来干什么：清除浮动，但是只能用overflow:hidden来进行清除。用其他方式的话，内部的浮动可以清除，但是父元素本身脱离了文档流，会影响后面的元素。还可以解决父子元素之间margin高度塌陷问题。bfc布局规则：1、内部元素与外部元素不影响2、与外部浮动元素不会重叠。3、计算内部元素的高度时，bfc会计算浮动元素的高度，这就时高度不会塌陷。4、垂直方向布局。

发表于 2022-05-24 16:45:12 回复(0)

牛客674717816号

1.定义：块级格式化上下文，独立渲染区域，不会影响边界外的元素 2.形成条件：a.float b.position c.overflow d.display 3. 布局规则：a.区域内box从上到下排列 b.垂直方向由margin决定 c.同一bfc内box会外边距重叠 d.bfc不会与float重叠 e.bfc计算高度，也会计算float元素 4.解决问题：a.清除浮动 b.外边距重叠 c.高度塌陷

发表于 2022-04-27 19:43:32 回复(0)

好困好困

BFC(Block Formatting Context)块级格式化上下文，是Web页面一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素。 BFC布局规则 -内部盒子会在垂直方向，一个接一个地放置。 -Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。 -每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 -BFC的区域不会与float box重叠。 -BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 -计算BFC的高度时，浮动元素也参与计算。 BFC形成的条件 float的值不是none position的值是absolute或者fixed display的值是inline-block、table-cell、flex、table-caption或者inline-flex overflow的值不是visible -`float `设置成 `left `或 `right` -`position `是`absolute`或者`fixed` -`overflow `不是`visible`，为 `auto`、`scroll`、`hidden` -`display`是`flex`或者`inline-block` 等 BFC解决的问题：文字环绕、浮动时的高度坍塌、外边距折叠和外边距穿透加分回答 BFC的方式都能清除浮动，但是常使用的清除浮动的BFC方式只有`overflow:hidden`,原因是使用float或者position方式清除浮动，虽然父级盒子内部浮动被清除了，但是父级本身又脱离文档流了，会对父级后面的兄弟盒子的布局造成影响。如果设置父级为`display:flex`，内部的浮动就会失效。所以通常只是用`overflow: hidden`清除浮动。 IFC（Inline formatting contexts）：内联格式上下文。IFC的高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)，IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。 GFC（GrideLayout formatting contexts）：网格布局格式化上下文。当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域。 FFC（Flex formatting contexts）：自适应格式上下文。display值为flex或者inline-flex的元素将会生成自适应容器。

发表于 2022-06-29 10:32:23 回复(0)

牛客979462847号

.定义：块级格式化上下文，独立的渲染区域，不会影响边界外的元素 2.形成条件： a.flaot b.position 3. overflow 4.display 3.布局规则： a.区域内box从上到下排列 b.box垂直方向的距离由margin决定 c.同一个bfc内box margin会重叠 d.bfc不会与flaot重叠 e.bfc计算高度也会计算float元素

编辑于 2022-09-14 14:03:48 回复(0)

可乐罐子ovo

BFC(块级格式化上下文)，BFC是一个独立的布局环境，可以理解为一个箱子，箱子内部的元素不会影响到外部。可以用来解决元素之间margin重叠问题；BFC可以包含浮动的元素（清除浮动）；也可以阻止元素被浮动元素覆盖。开启BFC的方法有：float（除none之外）、position（absolute/）、dispaly（inline-block、table-cells、flex）、overflow(hidden\auto\scroll)等

发表于 2022-05-21 02:48:04 回复(0)

要双休的共享单车人很漂亮

BFC 是结界，内部布局不受外界；清浮动、防塌陷，margin 不再乱堆叠；触发靠 overflow，display、float 也能设。

发表于 2025-07-11 16:09:57 回复(0)

卡布不卡

得分点：块级格式化上下文独立的渲染区域不会影响边界以外的元素形成BFC的条件（float、position、overflow、display）标准回答 BFC（Block Formatting Context，块级格式化上下文）是Web页面的一块独立渲染区域，内部元素的渲染不会影响边界以外的元素。 BFC布局规则：内部盒子会在垂直方向，一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此。 BFC的区域不会与float box重叠。 BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。计算BFC的高度时，浮动元素也参与计算。 BFC形成的条件： float设置成left或right position是absolute或者fixed overflow不是visible，为auto、scroll、hidden display是flex或者inline-block等 BFC能解决的问题：清除浮动。

发表于 2025-05-07 23:06:14 回复(1)

木子舟白

1. 定义：块级格式化上下文，独立的渲染区域，不会影响边界外的元素 2. 形成的条件：a.浮动 b. 非静态定位，c. overflow:hidden d. display:table 3. 解决的问题：a. 浮动元素重叠 b. 父元素高度塌陷 c. margin重叠

发表于 2025-03-22 06:27:10 回复(0)

保持热忱天天向上

BFC：块级上下文。触发条件：1.float不是none；2.绝对元素，position：absolute以及fixed；3.行内元素inline block；4.overflow值不为visible；5.檀香元素display为flex或者inline-flex。特点： 1.盒子从顶部垂直一个个排列。 2.盒子垂直距离有margin决定，同一个BFC俩相邻盒子会发生重叠。缺点：有副作用。解决方案：display：flow-root。

发表于 2024-05-12 21:12:37 回复(0)

kumoko

1.概念：块级格式上下文，是一个独立的渲染区域，规定内部的box如何布局，且这个区域内的子元素不会影响到外面的元素 2.如何创建BFC 1）float不为none 2）position为absolute或flexd 3）display为flex，inline-block，table-cell，table-caption 4）overflow不为visible 3.作用 1）解决边距重合问题 2）解决高度塌陷的问题 3）阻止元素被浮动元素覆盖

发表于 2023-12-26 15:50:34 回复(0)

牛客913598676号

BFC:块级格式上下文，目的是形成一个相对于外界的独立空间，让内部子元素不会影响到外部的元素

发表于 2023-08-04 15:59:22 回复(0)

edjtu19-软工3班-何江涛

BFC块级格式化上下文，是独立的渲染区域。`独立`意味着它不影响外部元素，外部也不影响它。用 display positon float overflw 都能产生BFC。

BFC有几个作用：
1.因为BFC独立渲染，所以能避免margin折叠。
2.BFC能感知float，计算BFC高度时，浮动元素也参与计算。因此可以用来`清除浮动`。
3.自适应两栏布局。

BFC也会带来副作用：
1.display 会让元素性质或者布局方式改变；
2.position、float会让元素脱离文档流；
3.overflow 可能会切割部分元素。
其中overflow副作用最小，因此往往用`overflow:hidden`清除浮动。

与BFC对应的是`IFC行内格式化上下文`，把IFC看做行元素就行。

说一说BFC，IFC，FFC，GFC的关系：
前端布局大致分为三代。
第一代布局，是最古老也是我们学的最多的。由BFC、IFC、position、float组成。
第二代布局，是w3c在2009年提出的flex布局，用`display:flex`切换。flex布局会产生`FFC自适应格式上下文`，这意味着flex元素内部布局遵循FFC规则。
第三代布局，是2012诞生的Grid布局，用`display:grid`切换成Grid布局。它会产生`GFC网格布局格式上下文`。
自己ps的图片

编辑于 2022-11-10 18:38:27 回复(0)

说一说BFC

问题信息

热门推荐

相关试题