百度360必应搜狗淘宝本站头条
mybatis 使用python中+=代表什么java中switch盒子垂直居中httpservletrequest 获取参数
当前位置：网站首页 > 技术文章 > 正文

关于BFC理解（bfc的概念及使用场景）

wxin55 2024-11-06 12:46 13 浏览 0 评论

本文同步本人掘金平台的文章：https://juejin.cn/post/6844903655468957704

BFC(Block Formatting Context，块格式上下文)是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。对其的理解能够帮你更好的布局页面。

常见的定位方案

在进入BFC话题前，先来捋一下常见的定位方案，定位方案是控制元素的布局，主要有三种常见的方案：

普通流(正常文档流)

在普通流中，元素按照其在HTML的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是流定位。也可以说，普通流中元素的位置由该元素在HTML文档中的位置决定。

额外：??

HTML中，元素可以分成块级元素（block-level elements）和行内元素（inline-level elements）。具体的解析会另开一篇博文出来讲解。

下面给出普通流的一个例子：

<body>
	<span>first</span>
	<a href="javascript:;">second</a>
	<div class="demo demo1"></div>
	<div class="demo demo2"></div>
</body>
复制代码
html,body{
	margin: 0;
	padding: 0;
}
.demo{
	width: 200px;
	height: 200px;
}
.demo1{
	background: red;
}
.demo2{
	background: blue;
}
复制代码

浮动

在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果和印刷排版中的文本环绕相似。如下：

<body>
	<div class="container">
		<div class="left"></div>
		文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容
	</div>
</body>
复制代码
html,body{
    margin: 0;
    padding: 0;
}
body{
    padding: 100px;
}
.container{
    border: 1px dotted red;
}
.container .left{
    width: 50px;
    height: 50px;
    background: blue;
    float: left;
}
复制代码

??为什会内容环绕呢，而不是跟浮动元素重合呢？

《CSS权威指南》中指出，浮动的目的，最初只能用于图像，的就是为了允许其他内容（如文本）“围绕”该图像。而后来的CSS允许浮动任何元素。

绝对定位

在绝对定位布局中，元素会整体脱离普通流（浮动布局可以理解成脱离父元素文本流），因此绝对定位不会对其兄弟元素造成影响，而具体的位置由绝对定位的坐标决定。

什么是BFC

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

BFC即Block Formatting Content（块级格式上下文），它属于上述定位方案的普通流。具有BFC特性的元素可以看作是**隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。**后面介绍。

简单来说，可以把BFC理解成一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部的元素。

触发BFC的条件

下面的方式会创建块格式上下文：

  • 根元素或包含根元素的元素，这里我理解为body元素
  • 浮动元素（元素的float不是none）
  • 绝对定位元素（元素的position为absolute或fixed）
  • 行内块元素（元素的display为inline-block）
  • 表格单元格（元素的display为table-cell，html表格单元格默认为该值）
  • 表格标题（元素的display为table-caption，html表格标题默认为该值）
  • 匿名表格单元格元素（元素的display为table、table-row、table-row-group、table-header-group、table-footer-group（分别是html table、row、tbody、thead、tfoot的默认属性）或inline-table）
  • overflow值不为visible的块元素
  • display值为flow-root的元素
  • contain值为layout、content或strict的元素
  • 弹性元素（display为flex或inline-flex元素的直接子元素）
  • 网格元素（display为grid或inline-grip元素的直接子元素）
  • 多列容器（元素的column-count或column-width不为auto，包括column-count为1）
  • column-span为all的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中

创建了块格式上下文的元素中的所有内容都会被包含在BFC中。以上的创建方式参考自块格式化上下文

BFC的特性（作用）

简单罗列下BFC的特性：

  1. 内部的box会在垂直方向，从顶部开始一个接一个地放置
  2. box垂直方向的距离由margin决定。属于同一个BFC的两个相邻的box的margin会发生叠加，结果值并集
  3. 在BFC中，每个盒子的左外边缘（margin-left）会触碰到容器的左边缘（border-left）。（对于从右到左的格式来说，则触碰到右边缘），即使是浮动也是如此。即不会发生margin穿透。
  4. 形成了BFC的区域不会与float box重叠（可阻止因浮动元素引发的文字环绕现象）
  5. 计算BFC高度时，浮动元素也参与计算（BFC会确切包含浮动的子元素，即闭合浮动）

注意??，对于第五点，原本浮动元素是应该脱离文档流的，但是BFC中会计算其高度。

BFC的一些应用

实现自适应的两栏布局

应用了第四点BFC的区域不会与float box重叠的特性。一边浮动，另一边自适应的部分形成BFC，那么两者就不会重叠，避免了文字环绕及类似情形。

<body>
	<div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
	</div>
</body>
复制代码
html,body{
    margin: 0;
    padding: 0;
}
body{
    padding: 50px;
}
.container {
    width: 100%;
}
.left {
    width: 100px;
    height: 150px;
    background-color: blue;
    float: left;
}
.right {
    height: 200px;
    background-color: red;
    overflow: hidden; /*把.right这个自适应的box变成BFC，避免与.left box这个有float属性的元素重叠*/
}
复制代码

解决父元素高度塌陷

高度塌陷产生的原因：父元素未设置固定的高度，完全由子元素高度撑开；当子元素float之后脱离了文档流，父元素内部就没有支撑，造成了高度的塌陷。

解决这种问题我上之前的博文中有总结，地址请戳CSS清除浮动。这里再简单的说下原理：

也就是用到了BFC的特性五：闭合内部浮动。

<body>
	<div class="container">
	    <div class="left">left</div>
	</div>
</body>
复制代码
html,body{
    margin: 0;
    padding: 0;
}
.container {
    width: 100%;
    border: 1px solid red;
    overflow: hidden; /*形成BFC，使其能闭合浮动 box*/
}
.left {
    width: 100px;
    height: 150px;
    background-color: blue;
    float: left;
}
复制代码

margin重叠解决

在正常的文档流中，在垂直方向上兄弟box的margin会取交集（取最大的显示），为神马会出现这种情况呢？可以说是一种bug，也可以说是一种规范。我比较倾向于后者。

<body>
    <div class="top">top</div>
    <div class="bottom">bottom</div>
</body>
复制代码
.top {
    width: 100px;
    height: 100px;
    background-color: blue;
    margin-bottom: 100px;
}
.bottom{
    width: 100px;
    height: 100px;
    background-color: red;
    margin-top: 50px;
}
复制代码

上面出现的情况是BFC的特性三：属于同一个BFC的两个相邻的box的margin会发生叠加，结果值并集。那么，我们将他们隔离成不同的BFC不久解决问题了嘛。

<body>
    <div class='wrap'>
        <div class="top">top</div>
    </div>
    <div class="bottom">bottom</div>
</body>
复制代码
.top {
    width: 100px;
    height: 100px;
    background-color: blue;
    margin-bottom: 100px;
}
.bottom{
    width: 100px;
    height: 100px;
    background-color: red;
    margin-top: 50px;
}
.wrap{
    overflow: hidden; /*将.top box包含在另外一个BFC中隔离开*/
}
复制代码

后话

使用好BFC能够是你更好的布局。文中部分内容参考网络内容。

各位大佬轻喷，还请多多指正。放上github地址github.com/reng99求指教就逃:)

相关推荐

ES6中 Promise的使用场景?（es6promise用法例子）

一、介绍Promise，译为承诺，是异步编程的一种解决方案，比传统的解决方案（回调函数）更加合理和更加强大在以往我们如果处理多层异步操作，我们往往会像下面那样编写我们的代码doSomething(f...

JavaScript 对 Promise 并发的处理方法

Promise对象代表一个未来的值，它有三种状态：pending待定，这是Promise的初始状态，它可能成功，也可能失败，前途未卜fulfilled已完成，这是一种成功的状态，此时可以获取...

Promise的九大方法（promise的实例方法）

1、promise.resolv静态方法Promise.resolve(value)可以认为是newPromise方法的语法糖,比如Promise.resolve(42)可以认为是以下代码的语...

360前端一面~面试题解析（360前端开发面试题）

1.组件库按需加载怎么做的，具体打包配了什么-按需加载实现：借助打包工具（如Webpack的require.context或ES模块动态导入），在使用组件时才引入对应的代码。例如在V...

前端面试-Promise 的 finally 怎么实现的?如何在工作中使用?

Promise的finally方法是一个非常有用的工具，它无论Promise是成功（fulfilled）还是失败（rejected）都会执行，且不改变Promise的最终结果。它的实现原...

最简单手写Promise，30行代码理解Promise核心原理和发布订阅模式

看了全网手写Promise的，大部分对于新手还是比较难理解的，其中几个比较难的点：状态还未改变时通过发布订阅模式去收集事件实例化的时候通过调用构造函数里传出来的方法去修改类里面的状态，这个叫Re...

前端分享-Promise可以中途取消啦（promise可以取消吗）

传统Promise就像一台需要手动组装的设备，每次使用都要重新接线。而Promise.withResolvers的出现，相当于给开发者发了一个智能遥控器，可以随时随地控制异步操作。它解决了三大...

手写 Promise（手写输入法 中文）

前言都2020年了，Promise大家肯定都在用了，但是估计很多人对其原理还是一知半解，今天就让我们一起实现一个符合PromiseA+规范的Promise。附PromiseA+规范地址...

什么是 Promise.allSettled()!新手老手都要会?

Promise.allSettled()方法返回一个在所有给定的promise都已经fulfilled或rejected后的promise，并带有一个对象数组，每个对象表示对应的pr...

前端面试-关于Promise解析与高频面试题示范

Promise是啥，直接上图：Promise就是处理异步函数的API，它可以包裹一个异步函数，在异步函数完成时抛出完成状态，让代码结束远古时无限回掉的窘境。配合async/await语法糖，可...

宇宙厂:为什么前端离不开 Promise.withResolvers() ?

大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发。1.为什么需要Promise.with...

Promise 新增了一个超实用的 API!

在JavaScript的世界里，Promise一直是处理异步操作的神器。而现在，随着ES2025的发布，Promise又迎来了一个超实用的新成员——Promise.try()！这个新方法简...

一次搞懂 Promise 异步处理（promise 异步顺序执行）

PromisePromise就像这个词的表面意识一样，表示一种承诺、许诺，会在后面给出一个结果，成功或者失败。现在已经成为了主流的异步编程的操作方式，写进了标准里面。状态Promise有且仅有...

Promise 核心机制详解（promise机制的实现原理）

一、Promise的核心状态机Promise本质上是一个状态机，其行为由内部状态严格管控。每个Promise实例在创建时处于Pending（等待）状态，此时异步操作尚未完成。当异步操作成功...

javascript——Promise（js实现promise）

1.PromiseES6开始支持，Promise对象用于一个异步操作的最终完成（包括成功和失败）及结果值的表示。简单说就是处理异步请求的。之所以叫Promise，就是我承诺，如果成功则怎么处理，失败怎...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表