CSS之BFC的使用场景

2022-07-20 11:56:41

BFC（Block formatting context ）“块级格式上下文”。是用于布局块级盒子的一块渲染区域。并且与这个区域的外部毫无关系。

BFC

定义：BFC（Block formatting context ）“块级格式上下文”。是用于布局块级盒子的一块渲染区域。并且与这个区域的外部毫无关系。

特性：

1.处于同一个BFC中的元素相互影响，可能会发生margin合并（垂直方向）；
2.BFC在页面上是一个独立的容器，容器里面的子元素不会影响到外面的元素，反之亦然；
3.计算BFC的高度时，考虑BFC所包含的所有元素，包括浮动元素也参与计算；
4.浮动盒的区域不会叠加到BFC上；

形成规则：

浮动（float的值不为none）；
绝对定位元素（position的值为absolute或fixed）；
行内块（display为inline-block）
表格单元（display为table、table-cell、table-caption等HTML表格相关属性）；
弹性盒（display为flex或inline-flex）；
overflow不为visible；

BFC使用场景：
1.防止垂直margin重叠
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。
两个或多个块级盒子的垂直相邻边界会重合，它们的边界宽度是相邻边界宽度中的最大值。注意水平边界是不会重合的。

a：防止父子元素的边界重叠
默认效果：若块元素和它的第一个子元素（或最后一个子元素）之间没有 border、padding、inline content、 clearance 来分隔，那么上边距（或下边距）会被父子元素所共享，父子元素边界重合
解决方案：根据BFC的特性2,让父元素成为BFC即可。
示例：

<style>
    .parent {
        background: #E7A1C5;
        /*overflow：hidden使其形成一个BFC*/
        overflow:hidden;
    }
    .parent .child {
        background: #C8CDF5;
        height: 100px;
        margin-top: 10px;
    }
</style>
<section class="parent">
    <article class="child"></article>
</section>

前后对比：

b:防止兄弟元素的边界重叠
默认效果：在同一个BFC中的两个元素垂直方向上的margin会发生合并，外边距以大的为准
示例：默认效果

<style>
    #margin {
        background: #E7A1C5;
        overflow: hidden;
        width: 300px;
    }
    #margin>p {
        background: #C8CDF5;
        margin: 20px auto 30px;
    }
</style>
<section id="margin">
    <p>1</p>
    <p>2</p>
    <p>3</p>
</section>

默认效果：

可以看到1和2,2和3之间的间距不是50px，发生了边距重叠是取了它们之间的最大值30px。（垂直方向margin合并）
解决方案：根据BFC的特性2，在不需要margin合并的元素外创建一个BFC上下文（外围用一个BFC包裹）

<section id="margin">
    <p>1</p>
    <!--外围创建一个BFC上下文-->
    <div style="overflow:hidden;">
        <p>2</p>
    </div>
    <p>3</p>
</section>

修改后效果：
;
注：其实空元素的边界也会重叠（假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并，这个时候只需要在上下边距之间有填充即可）

2.阻止元素被浮动的元素覆盖（可做两栏布局自适应）
默认效果：某元素会被旁边浮动元素遮盖
解决方案：根据BFC特性4，让该元素成为BFC即可
示例：

 <style>
        .box {
            width: 400px;
            height: 100px;
            margin: 0  auto;
        }
        .green {
            width: 100px;
            height: 50px;
            float: left;
            background-color: green;
        }
        .red {
            width: 200px;
            height: 100px;
            /*添加overflow：hidden使红色盒子成为BFC*/
            overflow: hidden;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="green"></div>
        <div class="red">BFC</div>
    </div>
</body>

前后对比

注：将红色盒子设置为BFC后，若该盒子没有设置宽度，则该盒子会根据父元素和绿色盒子（浮动元素）的宽度来进行自适应，因此可做两栏布局自适应。

3.清除子元素浮动的副作用
默认效果：当我们不给父元素设置高度，子元素设置浮动的时候，父元素会发生高度塌陷
解决方案：根据BFC特性3，让父元素成为BFC即可
示例：

 <style>
        .box {
            width: 200px;
            border: 1px solid #ccc;
            /*添加overflow:hidden使其成为BFC*/
            overflow：hidden;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: green;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="son"></div>
    </div>
</body>

前后对比：

IFC

定义：Inline Formatting Contexts，也就是“内联格式化上下文”。

特性：

1.子元素水平方向横向排列，并且垂直方向起点为元素顶部。
2.子元素只会计算横向样式空间，【padding、border、margin】，垂直方向样式空间不会被计算，【padding、border、margin】。
在垂直方向上，子元素会以不同形式来对齐（vertical-align）
3.能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和与其中的浮动来决定。
4.IFC中的“line box”一般左右边贴紧其包含块，但float元素会优先排列。
5.IFC中的“line box”高度由 CSS 行高计算规则来确定，同个IFC下的多个line box高度可能会不同。
6.当 inline-level boxes的总宽度少于包含它们的line box时，其水平渲染规则由 text-align 属性值来决定。
7.当一个“inline box”超过父元素的宽度时，它会被分割成多个boxes，这些 oxes 分布在多个“line box”中。如果子元素未设置强制换行的情况下，“inline box”将不可被分割，将会溢出父元素。

形成规则：

块级元素中仅包含内联级别元素

ps：是当IFC中有块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个IFC

IFC产生的现象：
1.文本的上下间距不生效（IFC特性2导致）

<style>
.warp { border: 1px solid red; display: inline-block; }
.text {
  /*内联元素只有左右margin生效了*/
  margin: 20px;
  background: green;
  }
</style>
<div class="warp">
    <span class="text">文本一</span>
    <span class="text">文本二</span>
</div>

效果：左右margin撑开，上下margin并未撑开，符合IFC规范，只计算横向样式控件，不计算纵向样式空间。

2.多个元素水平居中（IFC特性6导致）

<style>
  .warp { border: 1px solid red; width: 200px; text-align: center; }
  .text { background: green; }
</style>
<div class="warp">
    <span class="text">文本一</span>
    <span class="text">文本二</span>
</div>

效果：水平排列规则根据IFC容器的text-align值来排列，可以用来实现多个子元素的水平居中。

3.float元素优先排列（IFC特性4导致）

<style>
.warp { border: 1px solid red; width: 200px; }
.text { background: green; }
.f-l { float: left; }
</style>
<div class="warp">
    <span class="text">这是文本1</span>
    <span class="text">这是文本2</span>
    <span class="text f-l">这是文本3</span>
    <span class="text">这是文本4</span>
</div>

效果：IFC中具备float属性值的元素优先排列，在很多场景中用来在文章段落开头添加“tag”可以用到。

利用IFC还可以做很多其他的事情，例如：解决元素垂直居中、多个文本元素行高不一致排列混乱。

FFC

FFC(Flex Formatting Contexts)直译为"自适应格式化上下文"，display值为flex 或者 inline-flex 的元素将会生成自适应容器（flex container）。

GFC

GFC(GridLayout Formatting Contexts)直译为"网格布局格式化上下文"，即display值为grid的元素
和 table 的区别：同样是一个二维表格，gridLayout 会以更加丰富的属性来控制行列、控制对齐以及更精细的控制语义

码农公寓

BFC

IFC

FFC

GFC

相关文章