前端之BFC说明

已于 2023-12-15 14:08:20 修改
阅读量823 收藏 16
点赞数 21
文章标签： 前端 html5
于 2023-12-15 09:42:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45054381/article/details/134999791
版权

一、定义

BFC - Block Formatting Context 块级格式化上下文 BFC的定义，在官方文档到中，是这么介绍BFC的。

重点：

1、每一个BFC区域只包括其子元素，不包括其子元素的子元素；

2、每一个BFC区域都是独立隔绝的,互不影响；

3、通过一些条件触发BFC，从而解决布局上出现的问题；

二、作用

BFC的触发条件

  1. 浮动元素 ( float 不取值为 none )

  2. 绝对定位元素 ( position 取值为 absolute 或 fixed )

  3. display 取值为 inline-block 、 table-cell 、 table-caption 、 flex 、 inline-flex 之一的元素

  4. overflow 不取值为 visible 的元素

  5. 根元素（body）

BFC的特性

  1. 属于同一个BFC的两个相邻容器的上下margin会重叠（重点）
  2. 计算BFC高度时浮动元素也参于计算（重点）
  3. BFC的区域不会与浮动容器发生重叠（重点）
  4. BFC内的容器在垂直方向依次排列
  5. 元素的margin-left与其包含块的border-left相接触
  6. BFC是独立容器，容器内部元素不会影响容器外部元素

三、代码演示 

问题一：外边距的塌陷问题（垂直塌陷），两个div盒子的margin重叠到一起。

<!DOCTYPE html>
<html lang="en">
<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 type="text/css">
    .box1{
        width: 200px;
        height: 200px;
        background: red;
        margin: 100px;
    }
    .box2{
        width: 200px;
        height: 200px;
        background: blue;
        margin: 100px;
    }
</style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>
</html>

解决方案：BFC，创建与世隔绝的独立区域，不会互相影响，那么，我们可以将这两个盒子，放到两个BFC区域中，即可解决这个问题。

<!DOCTYPE html>
<html lang="en">
<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 type="text/css">
    .box1{
        width: 200px;
        height: 200px;
        background: red;
        margin: 100px;
    }
    .box2{
        width: 200px;
        height: 200px;
        background: blue;
        margin: 100px;
    }
     //增加两个单独的BFC区域
    .box_bfc{
      overflow: hidden;
    }
</style>
</head>
<body>
  <div class="box_bfc">
  <div class="box1"></div>
  </div>
  <div class="box_bfc">
  <div class="box2"></div>
  </div>
</body>
</html>

问题二：利用BFC解决包含塌陷

<!DOCTYPE html>
<html lang="en">
<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 type="text/css">
    .box_bfc{
        width: 200px;
        height: 200px;
        background: red;
    }
    .box1{
        width: 100px;
        height: 100px;
        background: blue;
        margin-top: 20px;
    }
    
</style>
</head>
<body>
  <div class="box_bfc">
  <div class="box1"></div>
  </div>
</body>
</html>

解决方案：将父元素变成一个独立的BFC区域

<!DOCTYPE html>
<html lang="en">
<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 type="text/css">
    .box_bfc{
        width: 200px;
        height: 200px;
        background: red;
        overflow: hidden;
        /* display: flex、inline-block 、 table-cell 、 table-caption 、 flex 、 inline-flex */
        /* position: absolute 或 fixed; */
    }
    .box1{
        width: 100px;
        height: 100px;
        background: blue;
        margin-top: 20px;
    }
    
</style>
</head>
<body>
  <div class="box_bfc">
  <div class="box1"></div>
  </div>
</body>
</html>

问题三：当子元素浮动是，父元素没有设定高度时，父元素会高度塌陷

<!DOCTYPE html>
<html lang="en">
<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 type="text/css">
    .box_bfc{
        /* width: 200px; */
        /* height: 200px; */
        background: red;
        border: 10px solid rgb(30, 255, 0);
        /* overflow: hidden; */
        /* display: flex、inline-block 、 table-cell 、 table-caption 、 flex 、 inline-flex */
        /* position: absolute 或 fixed; */
    }
    .box1{
        width: 100px;
        height: 100px;
        background: blue;
        float: left;
    }
    
</style>
</head>
<body>
  <div class="box_bfc">
  <div class="box1"></div>
  </div>
</body>
</html>

解决方案：使得父元素触发BFC，计算BFC高度时浮动元素也参于计算，此时子元素虽然设置了浮动，但其高度仍计算至父元素内，从而解决了高度塌陷问题。

<!DOCTYPE html>
<html lang="en">
<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 type="text/css">
    .box_bfc{
        /* width: 200px; */
        /* height: 200px; */
        background: red;
        border: 10px solid rgb(30, 255, 0);
        overflow: hidden;
        /* display: flex、inline-block 、 table-cell 、 table-caption 、 flex 、 inline-flex */
        /* position: absolute 或 fixed; */
    }
    .box1{
        width: 100px;
        height: 100px;
        background: blue;
        float: left;
    }
    
</style>
</head>
<body>
  <div class="box_bfc">
  <div class="box1"></div>
  </div>
</body>
</html>

问题四：左侧元素浮动时，会与右侧元素发生重叠。左侧元素浮动，脱离文档流。

<!DOCTYPE html>
<html lang="en">
<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 type="text/css">
    .box1{
        width: 100px;
        height: 100px;
        background: blue;
        float: left;
    }
    .box2{
        width: 200px;
        height: 200px;
        background: red;
    }
    
</style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>
</html>

解决方案：红色区域触法BFC，BFC的区域不会与浮动容器发生重叠

<!DOCTYPE html>
<html lang="en">
<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 type="text/css">
    .box1{
        width: 100px;
        height: 100px;
        background: blue;
        float: left;
    }
    .box2{
        width: 200px;
        height: 200px;
        background: red;
        float: left;
        /* overflow: hidden; */
    }
    
</style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>
</html>

BFC功能总结

1、可以利用BFC解决两个相邻元素的上下margin重叠问题；
2、可以利用BFC解决高度塌陷问题；
3、可以利用BFC实现多栏布局（两栏、三栏、圣杯、双飞翼等）。

布局 

1、两栏布局

<!DOCTYPE html>
<html lang="en">
<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 type="text/css">
    * {
        margin: 0px;
        padding: 0px;
    }
    
    .left {
        width: 200px;
        height: 50px;
        background: aqua;
        float: left;
    }
    
    .right {
        height: 50px;
        overflow: hidden;
        background: aquamarine;
    }
</style>
</head>
<body>
  <div class="left">固定宽度</div>
    <div class="right">自适应宽度</div>

</body>
</html>

2、三栏布局

定义：圣杯布局和双飞翼布局，两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。

圣杯布局:渲染——中间在前，左侧在后
<div class="whole-page container">
  <div class="middle">中间</div>
  <div class="left">左侧</div>
  <div class="right">右侧</div>
</div>
<style>
.whole-page {
  height: 100vh;
  min-width:calc(var(--left-value) + var(--right-value) + 200px);
}
.container {
  --left-value: 400px;
  --right-value: 300px;
  padding: 0 var(--right-value) 0 var(--left-value);
  .left {
    float: left;
    position: relative;
    left: calc(-1 * var(--left-value));
    width: var(--left-value);
    background-color: pink;
    height: 100%;
//使用负magrin来实现。在设置了浮动且移动到父元素边框以外时，就会向上浮动。
    margin-left: -100%;
  }
  .right {
    float: left;
    width: var(--right-value);
    background-color: green;
    height: 100%;
    margin-right: calc(-1 * var(--right-value));
  }
  .middle {
    float: left;
    background-color: yellow;
    height: 100%;
    width: 100%;
  }
}
</style>
圣杯布局上下三栏嵌套
<div class="whole-page container">
  <div class="top">上面</div>
  <div class="middle">
    <div class="middle-deep">中间</div>
    <div class="left">左侧</div>
    <div class="right">右侧</div>
  </div>
  <div class="bottom">下面</div>
</div>
<style>
.whole-page {
  height: 100vh;
  min-width:calc(var(--left-value) + var(--right-value) + 200px);
}
.container {
  --top-value: 300px;
  --bottom-value: 200px;
  --left-value: 400px;
  --right-value: 300px;
  .top {
    height: var(--top-value);
    background-color: pink;
  }
  .bottom {
    height: var(--bottom-value);
    background-color: green;
  }
  .middle {
    height: calc(100% - var(--top-value) - var(--bottom-value));
    padding: 0 var(--right-value) 0 var(--left-value);
    .left {
      float: left;
      position: relative;
      left: calc(-1 * var(--left-value));
      width: var(--left-value);
      background-color: grey;
      height: 100%;
      margin-left: -100%;
    }
    .right {
      float: left;
      width: var(--right-value);
      background-color: aqua;
      height: 100%;
      margin-right: calc(-1 * var(--right-value));
    }
    .middle-deep {
      float: left;
      background-color: yellow;
      height: 100%;
      width: 100%;
    }
  }
}
</style>
双翼飞布局：解决了圣杯布局要求中间区域最小宽度的问题
<div class="whole-page container">
  <div class="middle">
    <div class="inner">中间</div>
  </div>
  <div class="left">左侧</div>
  <div class="right">右侧</div>
</div>
<style>
.whole-page {
  height: 100vh;
}
.container {
  --left-value: 400px;
  --right-value: 300px;
  .left {
    background-color: pink;
    height: 100%;
    width: var(--left-value);
    float: left;
    margin-left: -100%;
  }
  .right {
    background-color: green;
    height: 100%;
    width: var(--right-value);
    float: left;
    margin-left: calc(-1 * var(--right-value));
  }
  .middle {
    background-color: yellow;
    height: 100%;
    width: 100%;
    float: left;
    .inner {
      padding-left: var(--left-value);
      padding-right: var(--right-value);
      height: 100%;
    }
  }
}
</style>
双翼飞布局三层嵌套：
<div class="whole-page container">
  <div class="top">上面</div>
  <div class="middle">
    <div class="middle-deep">
      <div class="inner">中间</div>
    </div>
    <div class="left">左侧</div>
    <div class="right">右侧</div>
  </div>
  <div class="bottom">下面</div>
</div>
<style>
.whole-page {
  height: 100vh;
}
.container {
  --top-value: 300px;
  --bottom-value: 200px;
  --left-value: 400px;
  --right-value: 300px;
  .top {
    height: var(--top-value);
    background-color: pink;
  }
  .bottom {
    height: var(--bottom-value);
    background-color: green;
  }
  .middle {
    height: calc(100% - var(--top-value) - var(--bottom-value));
    .left {
      background-color: grey;
      height: 100%;
      width: var(--left-value);
      float: left;
      margin-left: -100%;
    }
    .right {
      background-color: aqua;
      height: 100%;
      width: var(--right-value);
      float: left;
      margin-left: calc(-1 * var(--right-value));
    }
    .middle-deep {
      background-color: yellow;
      float: left;
      height: 100%;
      width: 100%;
      .inner {
        margin-left: var(--left-value);
        margin-right: var(--right-value);
        height: 100%;
      }
    }
  }
}
</style>

3、更多布局（flex grid）

圣杯布局/双飞翼布局/flex/grid等，实现CSS三栏自适应布局的几种方法 - 知乎

OR疯者妮
关注
  • 21
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端基础——文档流与BFC
09-26
在前端开发中，理解和掌握文档流（Document Flow）与块级格式化上下文（Block Formatting Context，简称BFC）是构建网页布局的基础。这两个概念对于布局的控制、元素的定位以及盒模型的理解至关重要。 首先，我们来...
前端bfc的介绍与使用
02-23
关于BFC的介绍与使用 这篇文章是我对BFC的理解及总结 带你们了解bfc的布局规则，使用方法，触发条件等内容，理解简单。
前端之BFC解释说明
leilei__66的博客
07-11 1890
1、BFC定义 2、BFC的触发条件 3、BFC的特性 4、BFC功能总结
前端中的BFC是什么？
热门推荐
yigetutouzai的博客
07-05 1万+
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 MDN给出的解释是：BFC是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。......
学习块格式化上下文（BlockFormattingContext）
weixin_30472035的博客
08-20 199
什么是BFC BFC全称是Block Formatting Context，即块格式化上下文。它是CSS2.1规范定义的，关于CSS渲染定位的一个概念。要明白BFC到底是什么，首先来看看什么是视觉格式化模型。 视觉格式化模型 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制，它也是CSS中的一个概念。 视觉格式化模型定义了盒（Box）的生成...
前端知识点之BFC
PrototypeOne的博客
04-24 480
BFC 什么是BFC BFC：Block formatting context，中文块级格式化上下文。 它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。 BFC的布局规则 内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由m
BFC 到底是个啥？有何神通广大之处？这篇文章带你进入 BFC 的世界
qq_35727582的博客
04-26 3710
在实际开发过程中其实我们不经意间就用到了BFC这一利器解决了我们的问题，一起学习如何使用BFC实现我们想要的效果吧！
zuoxiaobai#zuo11.com#web前端BFC，什么是BFC1
07-25
字面意思很难理解，我们先来看几个例子",虽然做前端好几年了，但只是听说个这个名词，一直不清楚具体是什么意思，今天来研究下BFC相关示例BFC是 Block Fo
HTML-bfc初探
08-03
HTML中的BFC（Block ...掌握BFC对于前端开发者来说非常重要，它能帮助我们解决很多布局问题，提升网页设计的灵活性和可控性。理解BFC的工作原理，并熟练运用到实际项目中，将有助于提升网页的布局效率和质量。
2023最新前端面试题总结
05-30
"前端面试题总结" 以下是根据给定文件信息生成的相关知识点： 浏览器兼容性 在前端开发中，浏览器兼容性是一个非常重要的问题。不同的浏览器对 HTML、CSS、JavaScript 的解析和执行方式不同，这导致了同一个页面...
揭开 BFC 的神秘面纱：前端开发必知必会
最新发布
你若盛开，清风自来
11-28 1335
BFC（Block Format Context）即块级格式化上下文，是 Web 前端开发中的一个重要概念。它是 CSS 中的一种布局规则，用于定义块级元素如何在页面上进行布局和渲染。BFC 可以看作是一个独立的容器，其中包含了一个或多个块级元素。在 BFC 内部，元素的布局和渲染遵循特定的规则，与外部的元素相互独立。这意味着 BFC 内部的元素不会与外部的元素产生布局冲突，并且可以独立地进行样式计算和渲染。BFC 的创建可以通过一些 CSS 属性来触发，例如floatpositionoverflow。
前端-什么是BFC？BFC布局规则、触发条件、应用场景
乌药ice
01-10 4280
什么是BFC？ BFC（Block Formatting Context）直译为“块级格式化范围”。它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。 简单来说，BFC就是一个独立不干扰外界也不受外界干扰的盒子。 布局规则 内部的Box会在垂直方向，一个一个地布置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的Margin会发生重叠，也就是外边距塌陷。 每个元素的margin box的左边，
前端BFC
muzidigbig的博客
05-17 1433
块格式化上下文对浮动定位和清除浮动都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠也只会发生在属于同一BFC的块级元素之间。以上就是BFC的分析，BFC的概念比较抽象，但通过实例分析应该能够更好地理解BFC。在实际中，利用BFC可以闭合浮动。同时，由于BFC的隔离作用，可以利用BFC包含一个元素，防止这个元素与BFC外的元素发生margin collapse。
前端CSS理解 —— BFC(块级格式化上下文)
upgrade_bro的博客
08-04 150
BFC即 Block Formatting Contexts (块级格式化上下文)，BFC是指浏览器中创建了一个独立的渲染区域（内部元素的渲染不会影响边界以外的元素）。应用BFC可以避免margin折叠、清除浮动……
了解什么是bfc（前端面试）
2201_75866478的博客
10-31 498
你会怎么说？很多人会告诉你，bfc就是块级格式化上下文，那么这到底是什么意呢?bfc的全称是Block Format Content，直译为块级格式化上下文，它是一个独立的渲染区域，也就是说，触发bfc的元素会形成一个独立的渲染区域，这个区域里面的元素（包括他自己）不会影响外部元素的渲染，
# 前端：浅谈BFC
weixin_45899890的博客
10-27 461
块级格式上下文 (Block formatting context，简称BFC) 就是 Formatting context 的中最常见的一种。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的 Block-level Box 如何布局，并且与这个区域的外部毫不相干。
浅谈什么是前端BFC
.伊泽瑞尔
05-18 1996
BFC(Block Formatting Context)的英文缩写简称，block可以理解为一个简单的盒模型， Formatting Context则为block的上下文渲染环境。其作用是使内部元素的布局不受外部元素影响。
前端基础——BFC
qq_41721660的博客
04-09 525
FC 概念 FC(Formating context)格式化上下文，是css2.1提出的一个视觉渲染的概念。它是页面中一块渲染的区域，并且有一套自己的渲染规则，它决定了其子元素如何排列，以及和其他元素之间的相互关系 BFC BFC--block formating context：块级格式化上下文，BFC是页面中的一个块级渲染区域。 概念： 指的是页面中的一个标签，不一定是块级标签。要成为BFC，有指定的满足条件。BFC有自己的排列规范，决定了BFC区域的子元素如何排列，以及与其他元素之间的相互关系
关于前端中的BFC的理解
一个在全能之路上越走越远的男人。
03-27 1693
什么是BFC？ 全称块级格式化上下文？什么意思不懂。看了好多博客，基本都是抄的，真心都不是大白话。我今天来总结一下，用菜鸟级别的语言来描述。 BFC 应该可以抽象成一个 独立的个体，出淤泥而不染的白莲花。 是的不受其他元素的影响，始终保持自己独立。就是正常的普通流布局规则，设置的样式是什么样的，就按正常的普通流布局的表现。 内部的子元素 不受外界的影响，外界的元素，也不受内部的元素的影响。...
2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）
11-25
边距重叠是BFC处理的重要场景之一，无论是父子元素还是同级兄弟元素，通过转变为BFC，可以避免默认情况下由于边距叠加导致的问题。解决方法通常是在受影响的元素上添加`overflow:hidden`，使其进入BFC模式。 另一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值