BFC详解

最新推荐文章于 2024-07-24 10:58:42 发布

喵_美

最新推荐文章于 2024-07-24 10:58:42 发布

阅读量1k

点赞数 7

分类专栏： html 文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_34708564/article/details/140263360

版权

html 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

FC (格式化上下文)

FC的全称是: Formatting Contexts,是 W3C CSS2.1规范中的一个概念。

它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。

BFC

BFC(Block Formatting Contexts) 直译为"块级格式化上下文"。Block Formatting Contexts就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。

IFC

IFC(Inline Formatting Contexts) 直译为"内联格式化上下文"， IFC的line box (线框) 高度由其包含行内元素中最高的实际高度计算而来 (不受到竖直方向的padding/margin影响)。

IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间,便得line box宽度缩短。同个IFC下的多个line box高度会不同。

FFC

FFC (Flex Formatting Contexts) 直译为"自适应格式化上下文"，display 值为 flex 或者 inline-flex 的元素将会生成自适应容器(flex container) ，Flex Box由伸缩容器和伸缩项目组成。

通过设置元素的display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为flex的容器被渲染为一个块级元素，而设置为inline-flex的容器则渲染为一个行内元素。伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。

简单地说, Flexbox定义了伸缩容器内伸缩项目该如何布局。

GFC (了解)

后期讲响应式自适应和移动端布局的时候进行补充

GFC(GridLayout Formatting Contexts)直译为"网格布局格式化上下文"，当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器 (grid container) 上定义网格定义行(griddefinition rows) 和网格定义列 (grid definition columns) 属性各在网格项目 (grid item) 上定义网格行(gridrow) 和网格列 (grid columns)为每一个网格项目(grid item)定义位置和空间。

那么GFC有什么用呢,和table又有什么区别呢?首先同样是一个二维的表格,但GridLayout会有更加丰富的属性来控制行列,控制对齐以及更为精细的渲染语义和控制。

BFC详解

BFC形成条件

根元素
float 属性不为 none
position 为 absolute 或 fixed
display 为inline-block, table-cell, table-caption , flex， inline-flex
overflow 不为 visible ( hidden auto scroll )。

一般用overflow:hidden 开启BFC，因为float和positon会使自己也脱标，不符合常规文素的布局，虽然内部元素开启了BFC，但自己又成了问题儿童。用了flex也可以脱标，但是用了flex，内容也不会用浮动，直接走FFC了。

那BFC一般有什么用呢？比如常见的多栏布局,结合块级别元素浮动，里面的元素则是在一个相对隔离的环境里运行。

它决定了元素如何对其内容进行定位以及与其他元素的关系和相互作用当涉及到可视化布局的时候BlochFormatting Context提供了一个环境HTML元素在这个环境中按照一定规则进行布局

通俗翻译下: 形成一个完全独立的大箱子箱子中的子元素与外部元素隔绝开来不管内部元素怎么搞都不会影响到外部, 内部形成一个独立的文档流。通过创立BFC，相当于开启了一个独立的文档流，他里面的元素不管怎么蹦跶都不会影响到外部文档流。

BFC元素所具有的特性

BFC布局规则特性：

1.在BFC中，盒子从顶端开始垂直地一个接一个地排列.

2.盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠

3.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。

BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。
计算BFC的高度时，自然也会检测浮动的盒子高度。

它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC的主要用途

清除浮动影响

处理外边距穿透&合并

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BFC DEMO</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .box {
      width: 200px;
      height: 200px;
      background-color: blue;
      margin-bottom: 10px;
    }

    .box.bottom {
      background-color: red;
      margin-top: 30px;
    }

    .bfc {
      overflow: hidden;
      height: auto;
    }
  </style>
</head>
<body>
  <div class="box"></div>
    <!-- 添加一个bfc解决外边距穿透，中间是40px，理解即可，一般不会这么用，
    太麻烦，布局时只要避免这种情况就可以了，尽量用padding或给一个方向加margin就行了。 -->
  <div class="bfc">
    <div class="box bottom"></div>
  </div>
</body>
</html>

实现两栏|三栏自适应布局

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BFC DEMO</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .slide-bar {
      float: left;
      width: 200px;
      height: 600px;
      background-color: orange;
    }

    .content {
      /* 给自适应栏开启BFC */
      overflow: hidden;
      height: 800px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div class="slide-bar"></div>
  <div class="content">
    大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好
  </div>
</body>
</html>