BFC 规则，应用以及其他FC扩展（详细）

最新推荐文章于 2024-06-13 21:20:19 发布

Lee 酱

最新推荐文章于 2024-06-13 21:20:19 发布

阅读量248

点赞数

分类专栏： CSS 文章标签： css BFC

本文链接：https://blog.csdn.net/Lee_taotao/article/details/103860154

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、BFC（Block Formatting Contexts）块级格式化上下文

FC（Formatting Context）是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。常见的FC有BFC、IFC，还有GFC和FFC。

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

就是一个有特定规则的区域，这块区域内的元素只遵循特定规则，不受外部影响。

BFC（Block formatting contexts）：块级格式上下文
页面上的一个隔离的渲染区域，那么他是如何产生的呢？可以触发BFC的元素有float、position、overflow、display：table-cell/ inline-block/table-caption ；BFC有什么作用呢？比如说实现多栏布局’

IFC（Inline formatting contexts）：内联格式上下文
IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间，使得line box宽度缩短。同个ifc下的多个line box高度会不同
IFC中时不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。
那么IFC一般有什么用呢？
水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。
垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

GFC（GrideLayout formatting contexts）：网格布局格式化上下文
当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。那么GFC有什么用呢，和table又有什么区别呢？首先同样是一个二维的表格，但GridLayout会有更加丰富的属性来控制行列，控制对齐以及更为精细的渲染语义和控制。

FFC（Flex formatting contexts）:自适应格式上下文
display值为flex或者inline-flex的元素将会生成自适应容器（flex container），可惜这个牛逼的属性只有谷歌和火狐支持，不过在移动端也足够了，至少safari和chrome还是OK的，毕竟这俩在移动端才是王道。Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说，Flexbox 定义了伸缩容器内伸缩项目该如何布局。

2、如何触发BFC

主要用到的

html根元素
浮动元素：float除none以外的值
绝对定位元素：position的值为(absolute,fixed)
行内块元素：display为inline-block
表格单元格：display为table-cell
弹性元素：display为flex
网格元素：display为grid
overflow除visible的值（hidden,auto,scroll）

更多创建触发BFC：请查看：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

3、BFC的规则

属于同一个 BFC 的两个相邻 Box 垂直排列
属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠，父子Box的margin也会发生重叠
每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；
计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；

4、应用

解决margin重叠问题
清除浮动
防止与浮动重叠
实现两栏布局、三栏布局
防止文字环绕

5、实例

同规则1：属于同一个 BFC 的两个相邻 Box 垂直排列(代码和结果如下图)

<!DOCTYPE html>
<html>
  <head>
    <style>
        .bfc {
          overflow: hidden;
          width: 200px;
          height: 300px;
          border: 1px solid #ddd;
        }
        .box1 {
          width: 100px;
          height: 100px;
          background-color: red;
        }
        .box2 {
          width: 100px;
          height: 100px;
          background-color: green;
        }
    </style>
  </head>
  <body>
    <div class="bfc">
       <div class="box1">box1</div>
       <div class="box2">box2</div>
    </div>
  </body>
</html>

同规则2：属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠，父子Box的margin也会发生重叠(代码和结果如下图)

<!DOCTYPE html>
<html>
  <head>
    <style>
        .bfc {
          overflow: hidden;
          width: 200px;
          height: 300px;
          border: 1px solid #ddd;
        }
        .box1 {
          width: 100px;
          height: 100px;
          background-color: red;
          margin: 20px; /* box1的外边距 */
        }
        .box2 {
          margin-top: 20px; /* box2的上外边距 */
          width: 100px;
          height: 100px;
          background-color: green;
        }
    </style>
  </head>
  <body>
    <div class="bfc">
       <div class="box1">box1</div>
       <div class="box2">box2</div>
    </div>
  </body>
</html>

相邻box直接的外边距重叠，只有20px，应该有40px的间距

同应用1，BFC可以解决margin重叠，把相邻的box放在不同的BFC容器里（代码及结果如下图）

<!DOCTYPE html>
<html>
  <head>
    <style>
        .bfc {
          overflow: hidden;
          width: 200px;
          height: 300px;
          border: 1px solid #ddd;
        }
        .box1 {
          width: 100px;
          height: 100px;
          background-color: red;
          margin: 20px; /* box1的外边距 */
        }
        .box2 {
          margin-top: 20px; /* box2的上外边距 */
          width: 100px;
          height: 100px;
          background-color: green;
        }
        .bfc1 {
          overflow: hidden;
        }
    </style>
  </head>
  <body>
    <div class="bfc">
       <div class="bfc1">
         <div class="box1">box1</div>
       </div>
       <div class="bfc1">
         <div class="box2">box2</div>
       </div>
    </div>
  </body>
</html>

同规则3：每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此（以上两个实例的每个box元素的margin左边都与容器bfc的左边想接触，下面的代码是浮动也是此规则）

 <style>
     .bfc {
        overflow: hidden;
        width: 600px;
        height: 300px;
        border: 1px solid #ddd;
      }
      .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
      }
      .box2 {
        width: 150px;
        height: 150px;
        background-color: green;
      }
 </style>

 <div class="bfc">
    <div class="box1">box1</div>
    <div class="box2">box2文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕</div>
  </div>

同应用5，可以解决文字环绕，以上代码会发生文字环绕，如果把box2变成一个bfc容器，可以解决文字环绕

 <style>
     .bfc {
        overflow: hidden;
        width: 600px;
        height: 300px;
        border: 1px solid #ddd;
      }
      .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
      }
      .box2 {
        width: 150px;
        height: 150px;
        background-color: green;
        overflow: hidden; /* 生成一个bfc区域 */
      }
 </style>

 <div class="bfc">
    <div class="box1">box1</div>
    <div class="box2">box2文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕</div>
  </div>

以上代码解决了文字环绕，也是规则4：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；

以上代码也实现了应用3：阻止box2绿色区域被浮动元素box1红色区域覆盖

规则5：计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；（代码和结果如下图）

 <style>
     .bfc { /* 没有设置高度 */
        overflow: hidden;
        width: 600px;
        border: 1px solid #ddd;
      }
      .box1 { /* 浮动元素 */
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
      }
      .box2 {
        width: 150px;
        height: 150px;
        background-color: green;
      }
 </style>

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

应用2：清除浮动

 <style>
     .box { /* 没有设置高度 */
        /* overflow: hidden; */
        width: 600px;
        border: 1px solid #ddd;
      }
      .box1 { /* 浮动元素 */
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
      }
 </style>

 <div class="box">
    <div class="box1">box1</div>
  </div>

给.box设置了overflow:hidden形成BFC区域，会清除浮动

应用4：实现两栏布局、三栏布局

两栏布局

 <style>
     .box {
        height: 300px;
        border: 1px solid #ddd;
      }
      .box1 { /* 浮动元素 */
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
      }
      .box2 {  /* 不设置宽度自适应 */
        overflow: hidden; /* 形成BFC */
        height: 150px;
        background-color: green;
      }
 </style>

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

三栏布局

 <style>
     .box {
        min-width: 250px;
        height: 300px;
        border: 1px solid #ddd;
      }
      .box1 { /* 浮动元素 */
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
      }
      .box2 {
        width: 150px;
        height: 150px;
        background-color: green;
        float: right;
      }
      .box3 {  /* 不设置宽度自适应 */
        overflow: hidden; /* 形成BFC */
        height: 150px;
        background-color: yellow;
      }
 </style>

 <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>