十分钟让你搞懂BFC IFC GFC FFC_fc.cvcvnfbfcffs-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_35125764/article/details/103873149

本文深入解析CSS中的块级格式化上下文(BFC)概念，包括其生成条件、特性和工作原理，以及如何利用BFC解决网页布局中的常见问题，如清除内部浮动、避免margin重叠等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是Formatting context(格式上下文)?

Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用.

Box：css的基本单位
Box 是css的布局的基本单位，一个页面可以看作是由很多个box组成的。不同类型的box,会参与不同的Formatting context(一个决定如果渲染文档容器)，因此Box内的元素会以不同的形式渲染。

Formatting context的种类：

Block formatting context(BFC): 块级格式化上下文
inline formatting context(IFC): 行内格式化上下文
Flex formatting context(FFC): css3中的flex布局
Grid formatting context(GFC): css3中的Grid布局

BFC

哪些元素会生成BFC?

根元素body
float属性不为none
position为absolute或者fixed
display为inline-block,table-cell,table-caption,flex,inline-flex
overflow不为visible（即：hidden、auto、scroll）(常用)
最后，一般设置BFC最常用的就是给盒子加上 overflow: hidden; 因为这样的写法基本上不会对原有的其他样式产生影响。

BFC的特性规则：

（1）、BFC内部的盒子是从上到下一个接着一个排列的（正常的块级元素排列也是如此）
（2）、BFC内部的盒子之间的距离是通过margin值来设置的，相邻的两个盒子的margin会重叠，那么如果不属于同一个BFC则可以解决这个问题
（3）、BFC盒子内部的子盒子是紧贴着BFC盒子的边缘的（从左到右排列，则子盒子的左边缘紧贴着BFC的左边框（不与边框重叠）；从右到左排列，则子盒子的右边缘紧贴着BFC盒子的右边框）
（4）、BFC盒子不会与浮动的盒子产生重叠，而是紧靠着浮动的边缘
（5）、计算BFC的高度时，也会自动计算浮动或定位的盒子的高度

工作中常用到的BFC

清除内部浮动，父容器内容由子容器撑开

<style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
    } 
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
 </style>
 <body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
 </body>

在这里插入图片描述
处理：

.par {
    overflow: hidden;
 }

在这里插入图片描述
BFC的高度时，浮动元素也参与计算

为达到清除内部浮动，我们可以触发par生成BFC，那么par 在计算高度时，par内部的浮动元素child也会参与计算

消除margin双边距问题

<style>    
 p {       
 color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
 </style>
 <body>
    <p>Haha</p>
    <p>Hehe</p>
 </body>

效果
在这里插入图片描述
Box垂直方向的距离由margin决定。属于同一个BFC（body为根元素BFC）的两个相邻box的margin会发生重叠

处理：

<style>
    .wrap {
        overflow: hidden;
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
 </style>
 <body>
    <p>Haha</p>
      <div class=“wrap”><p>Hehe</p></div>
    </div>
 </body>

在这里插入图片描述
我们可以在p的外面包裹一层容器，并出发该容器生成一个BFC,那么两个p便不属于同一个BFC,就不会发生margin重叠了，
使用display:inline-block;也是同样的道理，触发了BFC

自适应两栏布局：

<style>
    body {
        width: 300px;
        position: relative;
    } 
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    } 
    .main {
        height: 200px;
        background: #fcc;
    }
 </style>
 <body>
    <div class="aside"></div>
    <div class="main"></div>
 </body>

显示：
在这里插入图片描述
BFC的区域不会与float box重叠，两个BFC布局之间互不影响，不会发生重叠：

.main {
    overflow: hidden;
 }

在这里插入图片描述
通过触发main生成BFC，来实现自适应两栏布局。

IFC

IFC的line box（线框）高度由其包含行内元素中高的实际高度计算而来（不受到竖直方向的padding/margin影响)
FFC

FFC

display值为flex或者inline-flex的元素将会生成自适应容器（flex container），

GFC

当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。