Advanced-Frontend/Daily-Interview-Question

第 39 题：介绍下 BFC 及其应用

webproblem opened this issue · 20 comments

webproblem commented

BFC 就是块级格式上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。创建 BFC 的方式有：

  1. html 根元素
  2. float 浮动
  3. 绝对定位
  4. overflow 不为 visiable
  5. display 为表格布局或者弹性布局

BFC 主要的作用是：

  1. 清除浮动
  2. 防止同一 BFC 容器中的相邻元素间的外边距重叠问题
JayZangwill commented

补充一下 @webproblem 童鞋的回答吧：
BFC特性：

  1. 内部box会在垂直方向，一个接一个地放置。
  2. Box垂直方向的距离由margin决定，在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
  3. 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）
  4. 形成了BFC的区域不会与float box重叠
  5. 计算BFC高度时，浮动元素也参与计算

生成BFC除了 @webproblem 童鞋所说的还有：行内块元素、网格布局、contain值为layout、content或 strict的元素等。
更多生成BFC的方法：传送门

BFC作用：

  1. 利用特性4可实现左图右文之类的效果：
<img src='image.png'>
<p>我是超长的文字<p>
img {
    float:left
}
p {
    overflow:hidden
}
  1. 利用特性5可以解决浮动元素造成的父元素高度塌陷问题：
<div class='parent'>
    <div class='float'>浮动元素</div>
</div>
.parent {
    overflow:hidden;
}
.float {
    float:left;
}
  • 👍43
  • 🎉4
  • 🚀1
  • 👀1
fireairforce commented

BFC：
BFC元素的垂直方向上会发生边距重叠。
BFC元素和浮动元素不会发生重叠。
BFC在计算高度时会把浮动元素计算进去。
BFC在页面是个独立的容器，里外元素互不影响。

  • 👍6
houmao commented

BFC：
BFC元素的垂直方向上会发生边距重叠。
BFC元素和浮动元素不会发生重叠。
BFC在计算高度时会把浮动元素计算进去。
BFC在页面是个独立的容器，里外元素互不影响。

第一条不准确，应该是BFC内的两个相邻块级元素垂直方向发生边距重叠

  • 👍9
  • 😄1
MillerDix commented

有一个怪怪的点：在body元素上增加 overflow: hidden; 由于overflow的扩散行为将导致body不会生成BFC。使用其他方法是正常的

PercyMo commented

10 分钟理解 BFC 原理

这篇文章感觉描述不是很准确，关于BFC属于文档流的这部分，个人不是很认同。

TheFoolG commented

BFC：
BFC元素的垂直方向上会发生边距重叠。
BFC元素和浮动元素不会发生重叠。
BFC在计算高度时会把浮动元素计算进去。
BFC在页面是个独立的容器，里外元素互不影响。

内部的Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠(margin重叠三个条件:同属于一个BFC;相邻;块级元素)

ihoneys commented

BFC概念
块级格式化上下文
如何创建BFC

1.overflow : overflow的值不为visible
2. position: 值不为static，relative
3. display的值为inline-block、table-cell、table-caption
4.float的值不为none（默认）
BFC原理
1.就是在BFC这个元素的垂直方面边距(margin)会发生重叠
2.BFC的区域不会与浮动元素的box重叠
3.BFC在页面中是一个独立的容器，外面的元素不会影响它里面的元素
4.计算BFC高度的时候，浮动元素也会参与计算

  • 👍2
zuoyi615 commented

BFC规范(块级格式化上下文：block formatting context)

BFC规定了内部的Block Box如何布局

  • 内部的Box会在垂直方向上一个接一个放置
  • Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠
  • 每个元素的 margin box 的左边，与包含块 border box 的左边相接触
  • BFC的区域不会与float box重叠
  • BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
  • 计算BFC的高度时，浮动元素也会参与计算

触发条件

  • 根元素 html
  • float 不为 none
  • overflow 不为 visible
  • display 值为 inline-block table-cell flex inline-flex 等
  • position 值为 absolute fixed
  • 👍3
m7yue commented

BFC的布局规则

  • 内部的Box会在垂直方向，一个接一个地放置。
  • 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,table-caption
  • overflow值不为visible
  • 弹性元素(flex布局)
  • 网格元素(grid布局)

BFC的作用
利用BFC避免margin重叠。

fengzhongsen commented

补充一下 @webproblem 童鞋的回答吧：
BFC特性：

  1. 内部box会在垂直方向，一个接一个地放置。
  2. Box垂直方向的距离由margin决定，在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
  3. 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）
  4. 形成了BFC的区域不会与float box重叠
  5. 计算BFC高度时，浮动元素也参与计算

生成BFC除了 @webproblem 童鞋所说的还有：行内块元素、网格布局、contain值为layout、content或 strict的元素等。
更多生成BFC的方法：传送门

BFC作用：

  1. 利用特性4可实现左图右文之类的效果：
<img src='image.png'>
<p>我是超长的文字<p>

img {
    float:left
}
p {
    overflow:hidden
}
  1. 利用特性5可以解决浮动元素造成的父元素高度塌陷问题：
<div class='parent'>
    <div class='float'>浮动元素</div>
</div>

.parent {
    overflow:hidden;
}
.float {
    float:left;
}

第1点，如果内部box 是 inline-block的话就不一定在垂直放置了。

shifengdiy commented

BFC是block formatting contexts，即块级格式上下文
以下解释来源于MDN
下列方式会创建块格式化上下文：

  • 根元素（）

  • 浮动元素（元素的 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 计算值(Computed)不为 visible 的块元素

  • display 值为 flow-root 的元素

  • contain 值为 layout、content 或 paint 的元素

  • 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）

  • 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）

  • 多列容器（元素的 column-count 或 column-width (en-US) 不为 auto，包括 column-count 为 1）

  • column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）

    浮动定位和清除浮动只会应用于同一个BFC内元素，不会影响其他BFC中元素布局。可以将浮动元素放在BFC中来解决浮动的塌陷问题，
    同时可以将块级元素放在不同BFC中解决margin融合问题

SnailOwO commented

BFC:
BFC全称是Block Formatting Context，意为块级格式化上下文。BFC就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

BFC用处：
清除元素之间的影响，解决margin塌陷问题
BFC可以包含浮动的元素（清楚浮动）
创建自适应布局
BFC可以阻止元素被浮动元素覆盖

BFC触发的方式：
浮动元素，float属性设置none以外的值
定位元素，position属性设置static以外的值
display属性设置为其中之一的值inline-block,table-cell,table-caption
overflow属性除visible以外的值,即hidden,auto,scroll

chengfengfengwang commented

BFC 就是块级格式上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。创建 BFC 的方式有：

  1. html 根元素
  2. float 浮动
  3. 绝对定位
  4. overflow 不为 visiable
  5. display 为表格布局或者弹性布局

BFC 主要的作用是：

  1. 清除浮动
  2. 防止同一 BFC 容器中的相邻元素间的外边距重叠问题

BFC只能清除父子margin重叠的问题吧？相邻同级子元素的上下margin重叠也能解决？

lideshengniu commented

BFC 就是块级格式上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。创建 BFC 的方式有：

  1. html 根元素
  2. float 浮动
  3. 绝对定位
  4. overflow 不为 visiable
  5. display 为表格布局或者弹性布局

BFC 主要的作用是：

  1. 清除浮动
  2. 防止同一 BFC 容器中的相邻元素间的外边距重叠问题

BFC只能清除父子margin重叠的问题吧？相邻同级子元素的上下margin重叠也能解决？

不能的 相对于同级的两个bfc来说他们都是其父的子 这就和开启了bfc元素的内部也依然存在margin重叠的问题