扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > VUE >CSS BFC是什么及有什么作用
  • 583

0
分享到

CSS BFC是什么及有什么作用

2024-04-02 19:04:59 583人浏览 安东尼
摘要

这篇文章主要讲解了“CSS BFC是什么及有什么作用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS BFC是什么及有什么作用”吧！在了解BFC(Blo

这篇文章主要讲解了“CSS BFC是什么及有什么作用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS BFC是什么及有什么作用”吧！

在了解BFC(Block FORMatting Context)之前，我们先来看看FC(Formatting Context)是什么：

CSS BFC是什么及有什么作用

这段话来自W3C官网，我们可以得到如下信息：

  • 所有的盒子都属于一个FC

  • 块级元素的布局属于一个BFC。例如div/p/h2等 -> BFC布局中

  • 行内级元素的布局属于一个IFC。例如img/a/span/i -> IFC布局中

简单理解：块级元素所在的布局和上下文就是BFC，行内级元素所在的布局和上下文就是IFC

问题1.块级元素都是在BFC中布局的，那么这个BFC在哪里呢

首先我们先看一下W3C的官方解释：

CSS BFC是什么及有什么作用

MDN上整理出的下了情况会创建BFC：

  • 根元素(html)

  • 浮动元素(元素的float值不是none)

  • 绝对定位元素(元素的position为absolute或者fixed)

  • 行内块元素(元素的display为inline-block)

  • 表格单元格(元素的display为table-cell，HTML表格单元格默认为该值，表格标题(元素的display为table-caption，HTML表格标题默认为该值)row，tbody，thead，tfoot的默认属性)或inline-table)

  • overflow计算值(Computed)不为visible的块元素

  • 弹性元素(display为flex或inline-flex元素的直接子元素)

  • 网格元素(display为grid或inline-grid元素的直接子元素)

  • display值为flow-root的元素

由此可见

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta Http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div></div>
    <div></div>
  </body>
</html>

这段代码中的box1和box2都是在html根元素的BFC中布局的

问题2.BFC的作用

首先先看一下官方文档对BFC作用的描述:

CSS BFC是什么及有什么作用

我们可以得到的信息：

  • 在一个BFC中，盒子会从包含块的顶部开始，在垂直方向上会一个挨着一个摆放，可能很多人都对这一点习以为常，但这点是BFC帮助我们实现的。当我们对某个盒子设置一个margin-top的时候，BFC会帮助我们解析，然后会在盒子布局时候给一个上边距

  • 在一个BFC中，每个元素的左边缘都会紧贴着包含块的左边缘

  • 在同一个BFC中，在垂直方向上，相邻两个盒子的margin会重叠，值取两者中较大的(可以利用此特性解决margin重叠问题)

作用1：利用BFC解决margin重叠问题
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        height: 200px;
        width: 400px;
        background-color: orange;

        margin-bottom: 30px;
      }
      .box2 {
        height: 150px;
        background-color: purple;

        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <div></div>
    <div></div>
  </body>
</html>

此时box1和box1此时同处于html的BFC中，并且box1和box2在垂直方向上相邻，所以会出现margin重叠，取两者其中较大的值50px

CSS BFC是什么及有什么作用

如何解决呢？可能很多人会想到直接给box1添加一个BFC，所以直接给box1添加个overflow:hidden属性

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        height: 200px;
        width: 400px;
        background-color: orange;

        margin-bottom: 30px;

        overflow: hidden;
      }
      .box2 {
        height: 150px;
        background-color: purple;

        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <div></div>
    <div></div>
  </body>
</html>

结果呢？

CSS BFC是什么及有什么作用

发现并不起作用。可能此时很多人就懵了，box1此时不是明明已经形成了BFC了嘛，为什么还会发生重叠？让我来给你解释一下，首先此时box1确实是已经形成了BFC（可以理解成box1内部形成了BFC），但是对于box1这个元素的本身，还是和box2同属于html的BFC中，所以还是会发生margin重叠

所以我们要给box1套一层，然后给box1外层的盒子设置BFC

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      
      .container {
        overflow: hidden;
      }
      .box1 {
        height: 200px;
        width: 400px;
        background-color: orange;

        margin-bottom: 30px;
      }
      .box2 {
        height: 150px;
        background-color: purple;

        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <div>
      <div></div>
    </div>
    <div></div>
  </body>
</html>

此时box1属于container的BFC，而box2属于html的BFC，不属于同一个BFC，所以就能解决margin重叠问题

CSS BFC是什么及有什么作用

作用2：解决浮动高度塌陷问题

当我们给container里面的四个item设置浮动的时候，很明显，这几个元素都会脱离文档流，此时container不会有高度

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        background-color: orange;
      }

      .item {
        width: 400px;
        height: 200px;
        box-sizing: border-box;
        border: 1px solid #000;
        float: left;
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

CSS BFC是什么及有什么作用

很多网上博主说，通过给container设置一个BFC，内部的浮动元素就会向其汇报高度，然后container就能解决浮动高度塌陷问题，这个做法是正确的，但是这个说法其实是错误，并不是因为其内部的浮动元素向其汇报了高度

事实上，想通过BFC解决高度塌陷问题需要满足两个条件：

  • 浮动元素的父元素触发BFC，形成独立的块级格式化上下文(BFC)

  • 浮动元素的父元素高度为auto

首先我们先看一段W3C的描述

CSS BFC是什么及有什么作用

大致意思为BFC的高度是auto情况下，高度是这样计算：

  • 如果只有inline-level，是行高的顶部和底部的距离

  • 如果有block-level，是有最底层的块上边缘和最底层块盒子的下边缘之间的距离（有margin也会计算在内）

  • 如果有绝对定位元素，将被忽略（所有我们无法通过BFC解决绝对定位的高度塌陷问题）

  • 如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘（这才是BFC能解决浮动元素塌陷问题的原因，并不是因为浮动元素向上汇报了高度）

所以我们直接给container通过添加overflow属性设置BFC，则由于上述第四条4特性，container会增加高度来包括内部四个item浮动元素下边缘，所以解决了浮动塌陷问题

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        background-color: orange;
        
        overflow: hidden;
      }

      .item {
        width: 400px;
        height: 200px;
        box-sizing: border-box;
        border: 1px solid #000;
        float: left;
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

CSS BFC是什么及有什么作用

感谢各位的阅读，以上就是“CSS BFC是什么及有什么作用”的内容了，经过本文的学习后，相信大家对CSS BFC是什么及有什么作用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！

--结束END--

本文标题: CSS BFC是什么及有什么作用

本文链接: https://lsjlt.com/news/98785.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • CSS BFC是什么及有什么作用
    这篇文章主要讲解了“CSS BFC是什么及有什么作用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS BFC是什么及有什么作用”吧！在了解BFC(Blo...
    99+
    2024-04-02
  • css中BFC有什么作用
    这篇文章主要介绍“css中BFC有什么作用”，在日常操作中，相信很多人在css中BFC有什么作用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css中BFC有什么作用”的疑惑...
    99+
    2024-04-02
  • CSS中BFC的作用是什么
    本文小编为大家详细介绍“CSS中BFC的作用是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“CSS中BFC的作用是什么”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。 　　...
    99+
    2024-04-02
  • css中bfc指的是什么意思
    这篇文章主要介绍css中bfc指的是什么意思，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！在css中，bfc中文意思为“块级格式化上下文”，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔...
    99+
    2023-06-15
  • css中的BFC布局规则是什么
    这篇文章主要讲解了“css中的BFC布局规则是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css中的BFC布局规则是什么”吧！说明BFC是页面上隔离的独立容器，容器中的子元素不会影响外...
    99+
    2023-06-20
  • serialversionuid是什么及有什么作用
    本篇内容主要讲解“serialversionuid是什么及有什么作用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“serialversionuid是什么及有什么作用”吧!serialversio...
    99+
    2023-07-02
  • ComputerBrowser是什么以及有什么作用
    这篇文章给大家介绍ComputerBrowser是什么以及有什么作用，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。Computer Browser是什么意思？ 　　windows 2003 服务进程 　　服务名称:Br...
    99+
    2023-06-14
  • 设置BFC功能及使用的方法是什么
    这篇文章主要讲解了“设置BFC功能及使用的方法是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“设置BFC功能及使用的方法是什么”吧！首先BFC是啥？官方描述：块格式化上下文（Block ...
    99+
    2023-07-05
  • vue指令是什么及有什么作用
    这篇文章主要介绍了vue指令是什么及有什么作用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue指令是什么及有什么作用文章都会有所收获，下面我们一起来看看吧。 ...
    99+
    2024-04-02
  • hosts文件是什么及有什么作用
    这篇文章主要介绍了hosts文件是什么及有什么作用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇hosts文件是什么及有什么作用文章都会有所收获，下面我们一起来看看吧。hosts文件是什么：hosts文件是一个...
    99+
    2023-07-01
  • vue的el是什么及有什么作用
    本篇内容介绍了“vue的el是什么及有什么作用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！在vue中，el是element的缩写，可称之为...
    99+
    2023-07-04
  • 什么是css,在网页中有什么作用
    css（层叠样式表）是一种样式表语言，用于控制网页的外观和样式，其主要作用包括：分离内容和样式，方便更改网页外观；确保整个网站样式的一致性；提高网页可访问性，方便残障人士使用；创建响应式...
    99+
    2024-04-25
    css
  • css是什么？有什么用？
    CSS，即层叠样式表（Cascading Style Sheets），是一种用于网页设计的样式语言。通过CSS，你可以改变HTML页面上各个元素的外观、布局和行为。CSS最初是由赛迪公司（斯佩克特公司）的开发者创建的，并于1996年成为一项...
    99+
    2023-05-14
  • CSS属性组成及作用是什么
    这篇文章主要介绍“CSS属性组成及作用是什么”，在日常操作中，相信很多人在CSS属性组成及作用是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS属性组成及作用是什么”...
    99+
    2024-04-02
  • dhcp服务器是什么及有什么作用
    这篇文章主要介绍了dhcp服务器是什么及有什么作用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇dhcp服务器是什么及有什么作用文章都会有所收获，下面我们一起来看看吧。dhcp...
    99+
    2022-12-16
    dhcp服务器 服务器
  • CSS选择器有哪些及有什么作用
    这篇“CSS选择器有哪些及有什么作用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“CSS选...
    99+
    2024-04-02
  • css3中bfc的概念是什么
    这篇文章主要介绍“css3中bfc的概念是什么”，在日常操作中，相信很多人在css3中bfc的概念是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css3中bfc的概念是...
    99+
    2024-04-02
  • css的作用是什么
    这篇文章主要介绍了css的作用是什么，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。CSS指的是层叠样式表，一种用来表现HTML或XML等文件样式的计算机语言，是可以做到网页和...
    99+
    2023-06-06
  • CronTrigger是什么及有什么用
    CronTrigger是一个用于定时调度任务的类，它是Quartz调度框架中的一个重要组件。CronTrigger基于cron表达式...
    99+
    2023-09-13
    CronTrigger
  • ChatGPT是什么及有什么用
    本文小编为大家详细介绍“ChatGPT是什么及有什么用”，内容详细，步骤清晰，细节处理妥当，希望这篇“ChatGPT是什么及有什么用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。...
    99+
    2023-02-22
    chatgpt
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作