search

zxdfe / FE-Interview

Every step counts
34 stars 1 forks source link

第1题：说说什么是BFC？怎么触发（创建）？ #1

Open zxdfe opened 1 year ago

huangguanwolan99 commented 1 year ago

very good very very good 666

z1291231323 commented 1 year ago

块级格式化上下文，是一块独立的渲染区域，BFC的特性容器里面的元素不会影响外边元素布局，当然外部的元素也不能影响内部元素的布局

z1291231323 commented 1 year ago

①、浮动元素 float 除 none 以外的值 float：leat / right

      ②、定位元素  position  （absolute、fixed）

      ③、display  以下其中之一的值，inline-block、table-cell、table-caption

      ④、overflow 除了  visibility 以外的值 （hidden、auto、scroll）
Eason-1874 commented 1 year ago

哈哈哈哈哈哈哈，goodgoodstudy day day up

Eason-1874 commented 1 year ago

我有个问题，body具有BFC属性吗?为什么给body设置overflow hidden它不会计算浮动了的子元素的高度？

zxdfe commented 1 year ago

我有个问题，body具有BFC属性吗?为什么给body设置overflow hidden它不会计算浮动了的子元素的高度？

body默认不是BFC哈~~

rupoly commented 1 year ago

BFC - Block Formatting Context 块级格式化上下文，一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素，BFC是一块块独立的渲染区域，可以将BFC看成是元素的一种属性，拥有了这种属性的元素就会使他的子元素与世隔绝，不会影响到外部其他元素。

Moooodena commented 1 year ago

BFC即块级格式化上下文，他是一个独立的渲染区域，其内部的盒子在垂直方向会一个一个地放置；在编写css时产生的外边距塌陷问题可以通过触发盒子的BFC模式来解决；常见的触发方法有：overflow : hidden(不为visible)；定位position : absolute和fixed；display值为inline-block，flex，table-cell，table-caption等；

DengZhaoQuan commented 1 year ago

1. 什么是BFC: Block Formatting Context 块级格式化上下文，是一个独立的CSS渲染区域，在这个区域中，内部元素的渲染不会影响外部元素。 2. 如何创建（触发）BFC？

1.根元素（<html>）

2.浮动元素（float 值不为 none）

3.绝对定位元素（position 值为 absolute 或 fixed）

4.行内块元素（display 值为 inline-block）

5.表格单元格（display 值为 table-cell，HTML 表格单元格默认值）

6.表格标题（display 值为 table-caption，HTML 表格标题默认值）

7.匿名表格单元格元素（display 值为 table、table-row、 8.table-row-group、table-header-group、table-footer-group
（分别是 HTML table、tr、tbody、thead、tfoot 的默认值）或 inline-table）

8.overflow 值不为 visible、clip 的块元素

9.display 值为 flow-root 的元素

10.contain 值为 layout、content 或 paint 的元素

11.弹性元素（display 值为 flex 或 inline-flex 元素的直接子元素），如果它们本身既不是 flex、grid 也不是 table 容器

12网格元素（display 值为 grid 或 inline-grid 元素的直接子元素），如果它们本身既不是 flex、grid 也不是 table 容器

13.多列容器（column-count 或 column-width (en-US) 值不为 auto，包括column-count 为 1）

14.column-span 值为 all 的元素始终会创建一个新的 BFC，即使该元素没有包裹在一个多列容器中 (规范变更, Chrome bug)

3. BFC的常见应用场景

1. 清除浮动

2. 解决外边距塌陷问题
WLNCJL commented 1 year ago

  1. BFC（Block Formatting Context）块级格式化上下文，作用就是让BFC内部的布局不受外部的影响

  2. 触发BFC的条件

  3. 根元素

  4. 定位元素 position:fixed / position:absoluted

  5. 浮动元素 float属性值不为none

  6. overflow属性值不为visible

3.使用场景
```js
1.解决高度塌陷
2.解决margin重叠
3.阻止元素被浮动元素覆盖
BlueSky-Engineer commented 1 year ago

BFC是块级格式化上下文 触发条件：

  1. 根元素
  2. 浮动元素（float）
  3. 绝对定位元素（position为absolute或fixed）
  4. 表格单元格（display为table-cell）
  5. 行内块元素（display为inline-block）
  6. 网格元素（display为grid或inline-grid元素的直接子元素）
  7. overfolw值不为visible的块元素-弹性元素（display为flex或inline-flex元素的直接子元素）
Sophora77 commented 1 year ago

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

BFC常见的触发条件有 overflow:hidden、display为inline-block、flex、table相关，还有position为absolute、fixed。

z-forever-y commented 1 year ago 
BFC名为：“块级格式化上下文”，它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用。
简单来说，他就是一个相对独立的空间或者布局环境，让空间里的子元素不会影响到外面的布局
触发条件:1.overflow:hidden 2. display:inline-block 3. position: absolute 4. positon: fixed  
        5. display:table-cell  6.display:flex
xcop32221 commented 1 year ago

BFC：

通过开启BFC可以去解决一些问题

定义：

Block Formatting Context：块级格式化上下文；它是一个独立的渲染区域，只有Block-level box参与，规定了内部Block-level box如何布局，且与这个区域外部无关。

理解：BFC是一个独立的布局环境，其中的元素不受外界影响，并在一个BFC中，块盒子和行盒子都会垂直沿着其父元素的边框排列

布局规则：

解决问题：

创建BFC：

chenjiefe commented 1 year ago

触发BFC的方法:

  1. 根元素或包含根元素的元素
  2. 浮动元素（元素的 float 不是 none）
  3. 绝对定位元素（元素的 position 为 absolute 或 fixed）
  4. 行内块元素（元素的 display 为 inline-block）
  5. 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
  6. 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
  7. 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
  8. overflow 值不为 visible 的块元素
  9. display 值为 flow-root 的元素
  10. contain 值为 layout、content或 strict 的元素
  11. 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
  12. 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
  13. 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
  14. column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。
stevenhuanghr commented 1 year ago

块级格式上下文 触发bfc的方法： 1.根元素 2.float属性不为none 3.position为absolute或fixed 4.dispaly为inline-block,flex 5.overflow不为visible

Novecc commented 1 year ago

块级格式化上下文，简称BFC BFC是网页的一块区域，元素基于这块区域布局，它将内部的内容与外部的上下文隔离开，即BFC内的内容不会跟外部的元素重叠或相互影响

给元素添加以下任意属性值都会创建BFC 1 float: left 或 right,不为none即可 2 overflow: hidden、auto、scroll 不为visible即可 3 display：inline-block、table-cell、table-caption、flex、inline-flex、grid、inline-grid 4 position：absolute、fixed 5 网页根元素创建了一个顶级BFC

BFC的3个好处： 1 包含浮动元素 2 防止外边距折叠 3 防止文档流围绕浮动元素排列

Qian-e commented 1 year ago

BFC：（Block Formatting Context）块级格式化上下文；BFC是一个完全独立的空间，不会影响外面的布局。

怎么触发BFC？？ overflow：hidden； position: absolute； position: fixed； display: table-cell； display: flex display: inline-block；

实用场景：

  1. 高度塌陷问题；2. 多栏布局；3. margin重叠
NeoArcle commented 1 year ago

块级格式化上下文，是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签 解决了: 1、使用Float脱离文档流，高度塌陷 2、Margin边距重叠 3、两栏布局 触发元素： 1、overflow: hidden 2、display: inline-block 3、position: absolute 4、position: fixed 5、display: table-cell 6、display: flex

zicuan123 commented 1 year ago

BFC(Block Formatting Context)，即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：

  1. 内部的盒子会在垂直方向上一个接一个的放置
  2. 对于同一个BFC的两个相邻的盒子的margin会发生重叠，与方向无关
  3. 每个元素的左边界与包含块的左边界相接触(从左到右)，即使浮动元素也是如此
  4. BFC的区域不会与float的元素的区域重叠
  5. 计算BFC的高度时，浮动子元素也参与计算 BFC作用：形成一个相对于外界完全独立的容器，让内部的子元素不会影响到外部的元素，反之亦然 触发 BFC 的条件包含不限于：
  6. 根元素，即HTML元素
  7. 浮动元素：float值为left、right
  8. overflow值为 auto、scroll、hidden
  9. display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline、flex、grid、inline-grid
  10. position的值为absolute或fixed
xzg-YYDS commented 1 year ago

BFC 全称：Block Formatting Context， 名为 "块级格式化上下文" BFC规则: BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列 BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签 垂直方向的距离由margin决定， 属于同一个BFC的两个相邻的标签外边距会发生重叠 计算BFC的高度时，浮动元素也参与计算 BFC作用: 1.在一个BFC中，盒子会从包含块的顶部开始，在垂直方向上会一个挨着一个摆放，可能很多人都对这一点习以为常，但这点是BFC帮助我们实现的。当我们对某个盒子设置一个margin-top的时候，BFC会帮助我们解析，然后会在盒子布局时候给一个上边距 2.在一个BFC中，每个元素的左边缘都会紧贴着包含块的左边缘 3.在同一个BFC中，在垂直方向上，相邻两个盒子的margin会重叠，值取两者中较大的(可以利用此特性解决margin重叠问题) 实现BFC的方法

  1. 浮动元素，float 除 none 以外的值
  2. 定位元素，position的值不是static或者relative。
  3. display 为 inline-block flex grid
  4. overflow hidden
DouDouCat commented 1 year ago

BFC 全称：Block Formatting Context， 名为 "块级格式化上下文"。 决定元素如何进行定位，以及与其他元素之间的关系。在可视化布局时提供了一个环境，HTML的元素会按照这个规则去排列布局。它可以生成一个完全独立空间，让内部元素不受外界影响，常用于解决外边距塌陷等问题。 触发BFC的方式有: overflow:hidden, display:flex, position:absolute, position:fix, display: table-cell, 常见脱标的方式基本都可以实现

CDwenhuohuo commented 1 year ago

bfc：块级格式化上下文，bfc是一个完全独立的空间（布局环境），让内部子元素不受外部影响，外部元素也不会受到内部元素影响哦。 怎么触发bfc：最常见的就是 1,overflow：hidden， 2,float:left/right 3,display:flex或inline-flex 4,position:absolute 5:行内块display:inline-block也就是说，每次看到这些属性的时候，就代表该元素已经创建了一个bfc了。 解决的问题：解决外边距重叠，清浮动，