bfc

bfc

2022-03-21 21:31:46

一、写在前面
今天看到一道面试题，主要是关于BFC的理解，下面将针对BFC的相关特性做出总结。
二、何为BFC

BFC(Block Formatting Context)格式化上下文，是
web页面中盒子模型布局的CSS渲染模式，指的是一个独立
的渲染区域或者是一个隔离的独立容器。

三、形成BFC的条件

1、浮动元素，float除none以外。
2、定位元素，position(absolute, fixed)
3、display为以下其中之一的值：inline-block,table-cell,table-caption.
4、overflow除了visible以外的值(hidden,auto, scroll)

四、实践
4.1、BFC中的盒子对齐

内部的Box会在垂直方向上一个接着一个的放置。

4.2、外边距重叠
在正常的文档流中，两个兄弟盒子之间的具有由其外边距决定的，但是不是他们的外边距之和决定的，而是以较大的为准。

<!DOCTYPE html>
<html lang="cn">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0px;
      padding:0px
    }
    .container {
      overflow: hidden;
      width: 100px;
      height: 100px;
      background-color: red;
    }

    .box1 {
      height: 20px;
      margin: 10px 0;
      background-color: green;
    }

    .box2 {
      height: 20px;
      margin: 20px 0;
      background-color: green;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>

</body>

</html>

这里我们可以看到，第一个盒子存在上边距（因为使用BFC不会造成margin穿透问题）；但是两个盒子之间的距离是20px，而不是30px，因为垂直外边距会存在折叠问题，间距以较大的为准。
此时我们就可以使用另一个特性，bfc就是页面上的一个独立容器，容器里面的子元素不会影响外部元素，此时我们就可以在其中一个子元素的外层嵌套一层div,然后设置BFC。

<!DOCTYPE html>
<html lang="cn">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0px;
      padding:0px
    }
    .container {
      overflow: hidden;
      width: 100px;
      height: 100px;
      background-color: red;
    }

    .box1 {
      height: 20px;
      margin: 10px 0;
      background-color: green;
    }

    .box2 {
      height: 20px;
      margin: 20px 0;
      background-color: green;
    }
    .wapper {
      overflow: hidden;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="wapper">
      <div class="box1"></div>
    </div>
    <div class="box2"></div>
  </div>

</body>

</html>

4.3、不被浮动元素覆盖
如果我们想要实现两栏布局，比如说左边固定宽度，右边不设置宽度，此时右边自适应宽度，随着浏览器窗口的大小而改变。在没有设置BFC的时候，此时就会发现浮动元素就会覆盖right的元素，但是如果我们想要实现两栏布局，此时我们可以给right的元素设置BFC，因为设置BFC会不影响外部。

<!DOCTYPE html>
<html lang="cn">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .column:nth-of-type(1) {
      float: left;
      width: 200px;
      height: 300px;
      margin-right: 10px;
      background-color: red;
    }

    .column:nth-of-type(2) {
      overflow: hidden;
      height: 300px;
      background-color: purple;
    }
  </style>
</head>

<body>


  <div class="column"></div>
  <div class="column"></div>


</body>

</html>

在这里插入图片描述
4.4、三栏布局
左右两边固定，中间不设置宽度，因此中间的宽度自适应，随着浏览器的大小变化而变化。

<!DOCTYPE html>
<html lang="cn">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

    .column:nth-of-type(1),
    .column:nth-of-type(2) {
      float: left;
      width: 100px;
      height: 300px;
      background-color: green;
    }

    .column:nth-of-type(2) {
      float: right;
    }

    .column:nth-of-type(3) {
      overflow: hidden;
      /*创建bfc*/
      height: 300px;
      background-color: red;
    }
  </style>
</head>

<body>

  <div class="contain">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>

</body>

</html>

4.5、可以防止字体环绕
众所周知，浮动的盒子会遮盖下面的盒子，但是下面盒子里的文字是不会被遮盖的，文字反而还会环绕浮动的盒子。这也是一个比较有趣的特性。
在这里插入图片描述
但是我们如果不想让字体环绕，此时可以使用BFC,进行设置。

<!DOCTYPE html>
<html lang="cn">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .left {
      width: 200px;
      height: 200px;
      background-color: green;
      float: left;
    }

    .right {
      background-color: red;
      height: 300px;
      overflow: hidden;
    }
  </style>
</head>

<body>

  <div>
    <div class="left"></div>
    <div class="right">你好你好你好你好你好你好你好你好你好你好你好
      你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
      你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
      你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
      你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
      你好你好你好你好你好你好你好你好你好你好你好你好你好你好</div>
  </div>

</body>

</html>

此时展现的效果就为：
在这里插入图片描述
4.6、BFC包含浮动的块
如果我们使用浮动，则该元素就会脱离正常的文档流，则会造成父元素高度的坍塌，此时我们可以对其使用overflow:hidden来对其设置。

CSS

更多相关内容

什么是BFC？ CSS 使用伪元素清除浮动的方法
2020-12-13 22:38:29

BFC概念：　块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。我们先了解一个名词：BFC（block formatting context），中文为“块级格式化上...

收起
浅析CSS里的BFC和IFC的用法
2021-01-19 21:19:17

之前一直听到有人提到 CSS里的BFC，正巧在 IFE的练习里遇到了外边距折叠的问题，所以正好弄清楚BFC的机制。 (参考来源见文末的 Reference) 一什么是 BFC 和之前所有博文一样，还是先从What的角度开始介绍，...

收起
css布局之BFC模式（block formatting context）
2021-01-19 21:04:21

详解BFC【 block formatting context】 BFC这个东西说常见的话你可能不觉得，但是你肯定会常用到，也许你在用的时候也没想到BFC这东西。那它究竟是什么呢，我们来一起看一下。官方给出的BFC解释是这样的，浮动元素...

收起
TensorFlow内存管理bfc算法实例
2020-12-20 18:13:31

tensorflow设备内存管理模块实现了一个best-fit with coalescing算法（后文简称bfc算法）。 bfc算法是Doung Lea’s malloc(dlmalloc)的一个非常简单的版本。它具有内存分配、释放、碎片管理等基本功能。 2. bfc基本...

收起
CSS 清除浮动与BFC的方法
2020-11-21 16:55:34

BFC BFC：块级格式化上下文 BFC的布局规则内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。计算BFC的高度时，浮动元素也参与计算...

收起
10分钟理解CSS BFC原理及其应用
2020-12-09 09:15:35

在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案: 普通流 (normal flow) 在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，...

收起
CSS理解块级格式上下文（BFC）
2020-12-13 20:05:34

1.BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box（块级元素）参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干. 通俗...

收起
BFC
2021-01-18 17:12:26
CSS布局中的BFC问题面试题–边距重叠什么是边距重叠？什么情况下会发生边距重叠？如何解决边距重叠？边距重叠：两个box都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终...
CSS布局中的BFC问题

面试题–边距重叠
1. 什么是边距重叠？
2. 什么情况下会发生边距重叠？
3. 如何解决边距重叠？
边距重叠：两个box都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。

有两种边距重叠的情况

1.父子关系的重叠

父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距

给父元素添加 overflow：hidden
这样父元素就变为 BFC，不会随子元素产生外边距
```
<style>
.out {
background-color: #f00;
width: 200px;
height: 200px;
}

.inner{
margin-top: 50px;
width: 100px;
height: 100px;
background-color: blue;
}   
</style>
<div class="out">
    <div class="inner"></article>
</div>
```
2. 同级兄弟关系的重叠：

同级元素在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值大的那个
```
  <style type="text/css">
            .fat {
                background-color: #ccc;
            }
            .fat .child-one {
                width: 100px;
                height: 100px;
                margin-bottom: 50px;
                background-color: #f00;
            }

            .fat .child-two {
                width: 100px;
                height: 100px;
                margin-top: 20px;
                background-color: #345890;
            }
        </style>
   <section class="fat">
        <div class="child-one"></div>
        <div class="child-two"></div>
    </section>
```
可通过添加空元素或伪类元素，设置overflow:hidden;解决margin重叠问题

回答边距重叠—BFC

什么是BFC？

BFC就是块级格式化上下文的意思，BFC是一块独立的布局环境，保护其中内部元素不收外部影响，也不影响外部。本身BFC是一种css的布局方式，只是我们可以利用它来解决外边距折叠的问题，BFC并不是专门用来解决这个问题而创的；

如何触发BFC？
在box属性值为这些的情况下，都会让所属的box产生BFC。
overflow: auto/ hidden;
position: absolute/ fixed;
float: left/ right;
display: inline-block/ table-cell/ table-caption/ flex/ inline-flex
也可以用排除法：
overflow的值不是visible；
position的值不是static或relative
float的值不是none
display的值是inline-block 或 table-cell 或 flex 或 table-caption 或
inline-flex
BFC的原理？(面试可不说，但要理解)
1. BFC内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。
2. BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，外边的也不会影响里边的。
3. BFC的区域不会与float重叠。
4. 计算BFC的高度时，浮动元素也被计算在内。
BFC的应用

1. 可以用来自适应布局

利用BFC的这一个原理就可以实现两栏布局，左边定宽，右边自适应。不会相互影响，哪怕高度不相等。

给right加overflow:hidden；使其变成BFC，消除外部left因浮动对他的影响
```

<section id="layout">
        <style media="screen">
          #layout{
            background: red;
            height: 200px;
          }
          #layout .left{
            float: left;
            width: 100px;
            height: 80px;
            background: blue;
          }
          #layout .right{
            height: 100px;
            background:green;
            overflow: hidden;
          }
        </style>
        <div class="left">left</div>
        <div class="right">right</div>
    </section>
```
2. 可以清除浮动：

父元素加overflow:hidden/auto,变BFC
```

      <style>
        #out{
          background: red;
          border: 1px solid black;
          overflow: hidden;
        }
        #inner{
          float: left;
           width: 200px;
           height: 200px;
           background-color: blue;
        }
      </style>
    <div id="out">
        <div id="inner">我是浮动元素</div>
    </div>
```
3. 解决垂直边距重叠：

见上方案例
收起
展开全文
css html
常见的几种页面布局、BFC以及处理过程中遇到的高度塌陷问题
2021-01-20 14:11:32

说在前面文档流文档流包括浮动流、定位流以及普通的标准流。一、常见的几种页面布局静态布局定位布局流式布局弹性布局自适应布局响应式布局圣杯、双飞翼、栅格布局 ...特点：传统的网页布局形式，页面上的...

收起
BFC-开源
2021-05-15 00:51:27

适用于多种操作系统的本机Brainf * ck编译器。

收起

开源软件
HTML-bfc初探
2017-08-03 22:04:48

HTML-bfc初探

收起
bfc的详细介绍以及大总结
2020-01-17 14:57:21

BFC详细介绍BFC详细介绍

收起
前端bfc的介绍与使用
2020-02-23 14:01:54

关于BFC的介绍与使用这篇文章是我对BFC的理解及总结带你们了解bfc的布局规则，使用方法，触发条件等内容，理解简单。

收起

html