Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[css] 第7天 简述你对BFC规范的理解 #20

Open
haizhilin2013 opened this issue Apr 22, 2019 · 19 comments
Open

[css] 第7天 简述你对BFC规范的理解 #20

haizhilin2013 opened this issue Apr 22, 2019 · 19 comments

Comments

@haizhilin2013
Copy link
Collaborator

第7天 简述你对BFC规范的理解
@yxkhaha
Copy link

yxkhaha commented Apr 23, 2019

  • 是CSS中的一个渲染机制，BFC就相当于一个盒子，内部的元素与外界的元素互不干扰。它不会影响外部的布局，外部的布局也不会影响到它。

形成条件（任意一条）

  • float的值不是none
  • position 的值不是static或者relative
  • display的值是inline-block,table-cell,flex,table-caption或者inline-flex
  • overflow的值不是visible

特性

  • 内部的盒子会在垂直方向上一个接一个的放置
  • 对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
  • 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
  • BFC的区域不会与float的元素区域重叠
  • 计算BFC的高度时，浮动子元素也参与计算
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

@DarthVaderrr
Copy link

DarthVaderrr commented Jul 3, 2019 •
edited 

<div style="width:60px;height:60px;">
    <div style="margin:20px;width:20px;height:20px;"></div>
</div>

以上两个盒子产生的布局效果：内部盒子并不居中，而是上边框紧贴着外部盒子

对外部盒子采用BFC规则，可以解决问题，方法之一：增加一个overflow：auto样式：

  <div style="width:60px;height:60px;background: green;overflow: auto">
            <div style="margin:20px;width:20px;height:20px;background: red"></div>
    </div>

上面的两个盒子布局，由于外部是BFC元素，所以内部盒子会完全居中显示

@Konata9
Copy link

Konata9 commented Jul 24, 2019

BFC 全称“块级格式化上下文”(Block Formatting Context)，对应的还有 IFC。BFC 类似一个“结界”，如果一个 DOM 元素具有 BFC，那么它内部的子元素不会影响外面的元素；外面的元素也不会影响到其内部元素。

最常见的例子就是清除 float 的 overflow: hidden; 属性。overflow: hidden; 会触发元素的 BFC，因此其内部的 float 元素不会影响到外部元素的布局。

触发 BFC 的条件：

  • <html> 根元素
  • float 不为 none
  • overflow 为 auto,scroll,hidden
  • display 的值为 table-cell, table-caption,inline-block 中任何一个
  • position 的值不为 static 和 relative

BFC 可以实现更加健壮的自适应布局。

参考文章：《CSS 世界》

@zivenday zivenday mentioned this issue Aug 10, 2019
Open
@Daniel-Fang
Copy link

  1. 特性
    • 计算BFC的高度时，浮动子元素也参与计算
    • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
    • BFC的区域不会与float的元素区域重叠
  2. 形成条件
    • html 根元素
    • float的值不是none
    • position 的值不是static或者relative
    • display的值是inline-block,table-cell,table-caption,flex,inline-flex
    • overflow的值不是visible
  3. 应用场景
    • 解决浮动子元素导致父元素，高度坍塌的问题
    • 解决文字环绕在float 四周的情况
    • 解决边距重叠问题 （父子，兄弟，空元素等）

@censek
Copy link

censek commented Oct 8, 2019

https://www.jianshu.com/p/0d713b32cd0d

@nikolausliu
Copy link

  1. MDN 的解释
  2. 浮动、清除浮动只影响同一 BFC 内的元素。外边距折叠也只会发生在同一 BFC 内的元素之间。
  3. mdn 列举了很多可以形成 bfc 的条件，我只记两个：overflow:auto和display:flow-root。display:flow-root可以无副作用的创建一个 BFC，其它的条件有它本来的职责可能会产生副作用。

@crazyming9528
Copy link

  • 是CSS中的一个渲染机制，BFC就相当于一个盒子，内部的元素与外界的元素互不干扰。它不会影响外部的布局，外部的布局也不会影响到它。

形成条件（任意一条）

  • float的值不是none
  • position 的值不是static或者relative
  • display的值是inline-block,table-cell,flex,table-caption或者inline-flex
  • overflow的值不是visible

特性

  • 内部的盒子会在垂直方向上一个接一个的放置
  • 对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
  • 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
  • BFC的区域不会与float的元素区域重叠
  • 计算BFC的高度时，浮动子元素也参与计算
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

bfc与元素margin重叠没有关系,参考:https://demo.crazyming.com/?link=topic/d7/bfc.html

@crazyming9528
Copy link

  1. 特性

    • 计算BFC的高度时，浮动子元素也参与计算
    • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
    • BFC的区域不会与float的元素区域重叠

  2. 形成条件

    • html 根元素
    • float的值不是none
    • position 的值不是static或者relative
    • display的值是inline-block,table-cell,table-caption,flex,inline-flex
    • overflow的值不是visible

  3. 应用场景

    • 解决浮动子元素导致父元素，高度坍塌的问题
    • 解决文字环绕在float 四周的情况
    • 解决边距重叠问题 （父子，兄弟，空元素等）

bfc与元素margin重叠没有关系,参考:https://demo.crazyming.com/?link=topic/d7/bfc.html

@zxl-lxz
Copy link

zxl-lxz commented Mar 24, 2020 •
edited

什么是BFC

块级格式化上下文

BFC的特性（作用）

  1. 同属于一个BFC的两个块级盒子，在垂直方向上会发生margin重叠。

给其中一个盒子放入另外一个BFC中，解决margin重叠

  1. 浮动元素是一个单独的BFC。两个BFC之间不会影响。

解决浮动元素浮在其它元素表面上的问题。一般用于图文环绕。

  1. 计算BFC的高度时，浮动元素也计算在内。

给浮元素触发BFC。解决高度塌陷问题。

如何触发BFC

  1. HTML本身就是BFC
  2. 浮动元素
  3. 绝对定位元素（absolute/fixed）
  4. overflow取值不为visible
  5. display:
  • flex
  • inlineblock
  • grid
  • flow-root
  • table等等

@larry0442
Copy link

下列方式会创建块格式化上下文：

  • 根元素()
  • 浮动元素（元素的 float 不是 none）
  • 绝对定位元素（元素的 position 为 absolute 或 fixed）
  • 行内块元素（元素的 display 为 inline-block）
  • 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
  • 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
  • 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
  • overflow 值不为 visible 的块元素
  • display 值为 flow-root 的元素
  • contain 值为 layout、content或 paint 的元素
  • 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
  • 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
  • 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
    column-span 为 all 的元素始终会创建一个新的BFC）。

bfc: 块级格式化上下文

  • 子元素不影响外界，反之亦然

使用可以解决

  • margin 重叠
  • 高度塌陷
  • 与浮动有关的布局问题（忘记了）

@blueRoach
Copy link

blueRoach commented May 21, 2020 •
edited

  • BFC是一个独立的盒子，他内部有自己的一套规则，不受外部影响
    应用：可以用于解决同一个BFC下，两个元素margin重叠的问题
  • BFC不会与浮动元素重叠
    应用：右侧自适应两列布局
  • BFC元素计算高度时，会将浮动元素也一起计算
    应用：用于解决非BFC内部的BFC盒子，外部会塌陷的问题

以下之一会形成BFC：

  • 文档的根元素（）。
  • 浮点数（元素float不是none）。
  • 绝对定位的元素（元素position为is absolute或fixed）。
  • 内联块（带有的元素）。display: inline-block
  • 表格单元格（带有的元素，这是HTML表格单元格的默认设置）。display: table-cell
  • 表格标题（带有的元素，这是HTML表格标题的默认设置）。display: table-caption
  • 通过与元素隐式创建匿名表格单元格，，，，（这是HTML表，表中的行，表体，表头和表页脚，分别默认值），或。display: tabletable-rowtable-row-grouptable-header-grouptable-footer-groupinline-table
  • 块元素overflow的值不是visible。
  • display: flow-root。 此属性会创建一个BFC，且没有任何副作用------！！！
  • 与元素，或。contain: layoutcontentpaint
  • 弹性项目（元素的直接子项带有或）。display: flexinline-flex
  • 网格项（元素的直接子项带有或）。display: gridinline-grid
  • Multicol容器（元素存在column-count或column-width不存在auto，包括带有的元素column-count: 1）。
  • column-span: all即使column-span: all元素不在multicol容器中（规范更改，Chrome bug），也应始终创建新的格式设置上下文。

@giggleCYT
Copy link

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

通俗来讲
•BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。
•如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。

创建BFC
（1）根元素或包含根元素的元素
（2）浮动元素float＝left|right或inherit（≠none）
（3）绝对定位元素position＝absolute或fixed
（4）display＝inline-block|flex|inline-flex|table-cell或table-caption
（5）overflow＝hidden|auto或scroll(≠visible)

@haizhilin2013 haizhilin2013 mentioned this issue Jun 26, 2020
Open
@allenGKC
Copy link

可以看看我写的这篇关于BFC博客：从Float谈谈BFC

@MrZ2019
Copy link

MrZ2019 commented Sep 1, 2020

什么是BFC
块级格式化上下文

BFC的特性（作用）
同属于一个BFC的两个块级盒子，在垂直方向上会发生margin重叠。
给其中一个盒子放入另外一个BFC中，解决margin重叠

浮动元素是一个单独的BFC。两个BFC之间不会影响。
解决浮动元素浮在其它元素表面上的问题。一般用于图文环绕。

计算BFC的高度时，浮动元素也计算在内。
给浮元素触发BFC。解决高度塌陷问题。

如何触发BFC
HTML本身就是BFC
浮动元素
绝对定位元素（absolute/fixed）
overflow取值不为visible
display:
flex
inlineblock
grid
flow-root
table等等

@amikly
Copy link

amikly commented Oct 25, 2021

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

通俗来说，BFC 类似一个“结界”，如果一个 DOM 元素具有 BFC，那么它内部的子元素不会影响外面的元素；外面的元素也不会影响到其内部元素

作用

  1. 使BFC内部浮动元素不会到处乱跑，BFC就是页面上的一个隔离的独立容器
  2. 和浮动元素产生边界，BFC的区域不会float的元素区域重叠
  3. 使子元素不会导致父元素的高度塌陷，计算BFC的高度时，浮动子元素也参与计算

形成条件

  • 浮动元素：float 不为 none
  • 绝对定位元素：position 为 absolute 或fixed
  • 行内块元素：display 为 inline-block
  • overflow 计算值不为 visible 的块元素
  • 弹性元素：display 为 flex 或 inline-flex 元素的直接子元素
  • 网格元素：display 为 grid 或 inline-grid 元素的直接子元素
  • 根元素：<html>）
  • 表格单元格：display 为 table-cell（默认值）
  • 表格标题：display 为 table-caption（默认值）
  • 匿名表格单元格元素：display 为 table、table-row、table-row-group、table-header-group、table-footer-group 或 inline-table
  • display 为 flow-root 的元素
  • contain 为 layout、content 或 paint
  • 多列容器：元素的 column-count 或 column-width 不为 auto
  • column 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中

@www-wanglong
Copy link

BFC 是css中的一种渲染机制，BFC就相当于一个盒子，内部的元素与外界的元素互不干扰。它不会影响外部的布局，外部的布局也不会影响它。

形成的条件

  • float的值不是none
  • 绝对定位元素： position的值不是static或者relative
  • display的值为inline-block、flex、table-cell
  • overflow除了visible

BFC的应用

  • 同一个BFC下外边距会发生重叠
  • 计算BFC高度，浮动的元素也会参与
  • BFC可以阻止元素被浮动元素覆盖

@WangXi01
Copy link

BFC 类似一个“结界”，如果一个 DOM 元素具有 BFC，那么它内部的子元素不会影响外面的元素；外面的元素也不会影响到其内部元素。
应用场景：

  1. 解决子元素浮动导致的父元素坍塌
  2. margin重叠
  3. 文字环绕问题

@Iambecauseyouare
Copy link

BFC即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则，BFC的目的时形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素

@lili-0923
Copy link

一、BFC是什么

BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

二、触发 BFC

只要元素满足下面任一条件即可触发 BFC 特性：

  • body 根元素
  • 浮动元素：float 除 none 以外的值
  • 绝对定位元素：position 为 absolute、fixed
  • display 为 flex、inline-flex、inline-block、table-caption、table-cell
  • overflow 为 hidden、auto、scroll (除了 visible 以外的值)

三、应用场景

  • 解决浮动子元素导致父元素，高度坍塌的问题
  • 解决文字环绕在float 四周的情况
  • 解决边距重叠问题 （父子，兄弟，空元素等）

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests