【CSS】CSS中隐藏着的BFC

·  阅读 508

前言

在前端布局中,我们可能没有听说过BFC, 但我们一定在很多地方用到过BFC,很多开发者对BFC的作用只是将将说出来,并不是说的很清楚,基于此,本文就来深入探讨一下CSS中的BFC。

1 FC是什么

在讲BFC之前,我们先回顾一网页布局中的文档流。常见的文档流有三种:标准流、浮动流、定位流。有关文档流的内容可看我之前文章:juejin.cn/post/695983…

FC全称:Formatting Context,名为“格式化上下文”,是指具有某种CSS格式化规则(布局规则)的上下文环境,在这个上下文环境的所有子元素,都将根据其特定的CSS格式化规则进行排列。

我们可以给某个作为容器的元素指定特定的格式化上下文,此时这个元素就是具有特定的布局规则的渲染区域。 常见的格式化上下文有:

  • BFC(块级格式化上下文)
  • IFC(内联格式化上下文)
  • FFC(自适应格式化上下文)
  • GFC(网格布局格式化上下文)

2 BFC是什么

  • 全称为:块级格式化上下文, 是一个外部 独立 渲染的区域。
  • 是一种规则,作用就是隔离保护,里面的元素通过BFC布局,不会对外面的元素产生影响。

BFC就好比西游记里孙悟空画了一个圈让师傅和师弟呆在圈里,这样妖精就不能伤害师傅师弟,这个圈就是BFC,作用就是隔离保护,实际工作中我们也是利用BFC来解决实际问题。

bfc理解.jfif

3 如何触发BFC

并不是任意一个元素都可以当做BFC,只有当这个元素满足下面其中之一条件时,这个元素才可以当做一个BFC。

  • float不为none(left、right)
  • position不为relative (absolute、fixed)
  • overflow不为visible (hidden、auto、scroll)
  • display 为flex,line-block,table-cell,table-caption
  • html根元素

4 BFC特性

  • 内部的 Box 会在垂直方向上一个接一个的放置
  • 垂直方向上的距离由 margin 决定
  • BFC 的区域不会与 float 的元素区域重叠
  • 计算 BFC 的高度时,浮动元素也参与计算
  • 一个BFC区域只包含其子元素,不包括其子元素的子元素

5 BFC应用场景

在了解触发BFC条件和特性后,我们需要利用BFC特点来解决一些在布局中实际问题,其中BFC最大特点就是:每一个BFC区域都是相互独立,互不影响的。

5.1 解决外边距合并问题

5.11 问题呈现

当垂直排列的两个块级元素,同时给上面的盒子设置margin-bottom和下面的盒子设置margin-top,此时会形成外边距合并。

  • 当两个值为正值时,取最大值
  • 一正一负时,两个值相加
<head>
<meta charset="utf-8" />
<title>外边距合并</title>
<style>
    *{
            margin:0 auto;
            padding:0
    }
    .box{
            width:100px;
            height:100px;
            background-color:pink;
            margin-bottom:100px;
    }
    .box:last-of-type{
            background-color:aquamarine;
            margin-top:100px;
    }	
</style>
</head>
<body>
	<div class="box"></div>
	<div class="box"></div>
</body>

image.png

5.12 解决方案

将两个div放置在不同的BFC,这样这两个BFC的内容将不会互相干扰,把两个BFC分别包裹在两个container容器中,利用overflow:hidden触发container的BFC。

<head>
<meta charset="utf-8" />
<title>外边距合并问题解决</title>
<style>
    *{
        margin:0 auto;
        padding:0
    }
    .box{
        width:100px;
        height:100px;
        background-color:pink;
        margin-bottom:100px;
    }
    .container:last-of-type .box{
        background-color:aquamarine;
        margin-top:100px;
    }
    .container{
        overflow:hidden;
    }
</style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
  </div>
  <div class="container">
    <div class="box"></div>
  </div>
</body>

image.png

5.2 解决外边距塌陷问题

5.21 问题呈现

嵌套的两个块级元素给子元素设置向上的外边距,此时父元素会跟着掉下来,形成的是外边距塌陷。

<head>
<meta charset="utf-8" />
<title>外边距塌陷</title>
<style>
    *{
        margin:0;
        padding:0
    }
    .father{
        width:300px;
        height:200px;
        background-color:aquamarine;	
    }
    .son{
        width:100px;
        height:100px;
        background-color:pink;
        margin-top:100px;
    }
</style>
</head>
<body>
	<div class="father">
	  	<div class="son"></div>
	  </div>
</body>

image.png

5.22 解决方案

  • 给父元素设置1像素的上内边距或者上边框
  • 给父元素开启BFC
<head>
<meta charset="utf-8" />
<title>外边距塌陷问题解决</title>
<style>
    *{
        margin:0;
        padding:0
    }
    .father{
        width:300px;
        height:200px;
        /* 给父元素设置1像素的上内边距 */
        padding-top:1px;
        /* 给父元素设置1像素的上边框*/     
        border-top:1px solid transparent;
        /* 给父元素开启BFC */
        /* overflow: hidden; */
        background-color:aquamarine;	
    }
    .son{
        width:100px;
        height:100px;
        background-color:pink;
        margin-top:100px;
    }
</style>
</head>
<body>
<div class="father">
  	<div class="son"></div>
  </div>
</body>

image.png

5.3 清除浮动

先看一个例子,父亲包裹着子元素,当我们设置浮动后,子元素脱离文档流,父元素高度为0 。

<head>
<meta charset="utf-8" />
<title>清除元素浮动</title>
<style>
*{
    margin:0;
    padding:0
}
.father{
    background-color:aquamarine;
}
.son{
    width:100px;
    height:100px;
    background-color:pink;
    float:left;
}
</style>
</head>
<body>
<div class="father">
  	<div class="son"></div>
  </div>
</body>

image.png

通过overflow属性触发BFC,父元素将会包裹子元素,从而达到清除浮动作用。

.father{
    background-color:aquamarine;
    overflow:hidden;
}

image.png

5.4 阻止元素被浮动元素覆盖

当左侧盒子设置浮动后,浮动元素会覆盖了没有添加浮动的元素。

<head>
<meta charset="utf-8" />
<title>阻止元素被浮动元素覆盖 </title>
<style>
    *{
            margin:0;
            padding:0
    }
    .floatDiv{
            width:100px;
            height:200px;
            background-color:aquamarine;	
            float:left;
    }
    .normalDiv{
            width:200px;
            height:200px;
            background-color:pink;
    }
</style>
</head>
<body>
    <div class="floatDiv">1</div>
    <div class="normalDiv">233333332</div>
</body>

image.png 但这并不是我们想要的结果,我们可以触发.normalDiv的BFC来解决这个问题。普通流体BFC后,和浮动元素不会产生交集,顺着浮动元素形成自己的封闭上下文 。

.normalDiv{
   overflow: hidden;
}

image.png

6 总结

  • FC是一种布局规则,在这个布局规则中子元素,都要按照特定的规则进行排序;
  • BFC块级格式化上下文,是一个外部独立渲染的区域,里面的元素通过BFC布局,不会对外面元素产生影响;
  • 可以用来清除浮动、解决外边距合并塌陷问题、制作自适应盒子

结语

本篇文章就到此为止啦,由于本人经验水平有限,难免会有纰漏,对此欢迎指正。如觉得本文对你有帮助的话,欢迎点赞收藏❤❤❤,写作不易,持续输出的背后是无数个日夜的积累,您的点赞是持续写作的动力,感谢支持。

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改