BFC块格式化上下文

怕浪小乌龟

已于 2022-03-17 10:56:37 修改

阅读量129

点赞数

分类专栏： CSS3 H5 文章标签： css css3 html

于 2022-02-11 16:01:49 首次发布

本文链接：https://blog.csdn.net/wjh1840226173/article/details/122800037

版权

H5 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

CSS3

1 篇文章 0 订阅

订阅专栏

本文详细介绍了BFC（Block Formatting Context）的概念、创建条件及布局规则，并通过实例展示了如何利用BFC解决CSS布局问题，如防止margin重叠、清除内部浮动以及实现自适应多栏布局。BFC是一个独立的渲染区域，对内部元素布局有直接影响，同时也是理解和解决CSS布局问题的关键。

摘要由CSDN通过智能技术生成

前言

Formatting Context 是页面的一块渲染区域，并且有一套渲染规则，决定了其子元素将如何定位，以及和其它元素的关系和相互作用。
Formatting Context 有
BFC (Block formatting context)，
IFC (Inline formatting context)，
FFC (Flex formatting context)
GFC (Grid formatting context)。
FFC 和 GFC 为 CC3 中新增 flex 弹性盒子布局和grid二维网格布局。

提示：以下是本篇文章正文内容，下面案例可供参考

一、BFC介绍

1、BFC定义

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

2、什么方式会创建BFC

根元素（html）
浮动元素（元素的 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 计算值(Computed)不为 visible 的块元素
display 值为 flow-root 的元素
contain 值为 layout、content 或 paint 的元素
弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width (en-US) 不为 auto，包括 column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

上面方式都会创建BFC

详见官方说明

3、Box 盒子模型div + css

Box 是 CSS 布局的对象和基本单位，页面是由若干个Box组成的。

元素的类型和 display 属性，决定了这个 Box 的类型。不同类型的 Box 会参与不同的 Formatting Context。。

4、BFC 布局规则

BFC内，盒子依次垂直排列。
BFC内，两个盒子的垂直距离由 margin 属性决定。属于同一个BFC的两个相邻Box的margin会发生重叠【符合合并原则的margin合并后是使用大的margin】
BFC内，每个盒子的左外边缘接触内部盒子的左边缘（对于从右到左的格式，右边缘接触）。即使在存在浮动的情况下也是如此。除非创建新的BFC。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。

大概有这六个规则

详细见W3 的规则介绍

二、BFC的应用示例

1、防止 margin 重叠

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>防止 margin 重叠</title>
    <style>
      *{
          margin: 0;
          padding: 0;
      }
      p {
          color: skyblue;
          background: green;
          width: 200px;
          line-height: 100px;
          text-align:center;
          margin: 30px;
      }
      .bfc{
        overflow: hidden;
      }
  </style>
</head>

<body>
    <p>margin 重叠了</p>
    <p>margin 重叠了</p>

    <hr>
    <p>margin 没有重叠了</p>
    <div class="bfc">
      <p>margin 没有重叠了2</p>
    </div>
</body>
</html>

上面BFC规则里的第二条：BFC内，两个盒子的垂直距离由 margin 属性决定。属于同一个BFC的两个相邻Box的margin会发生重叠【符合合并原则的margin合并后是使用大的margin】，margin 重叠了。

在这里插入图片描述

用div嵌套让两个BFC 不直接相邻

2、清除内部浮动

创建一个新的 BFC，根据BFC 布局规则,上面规则最后一点
计算 BFC 的高度时，浮动元素也参与计算

当父节点没有设置高度，子节点设置浮动的时，会发生高度塌陷，此时可以这样清除内部浮动。
代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>清除内部浮动</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .parent {
        border: 15px solid black;
        width: 600px;
    }
    .parent2 {
        border: 15px solid black;
        width: 600px;
        overflow: hidden;
    }
    .child {
        border: 15px solid orange;
        width:200px;
        height: 200px;
        float: left;
        background-color: greenyellow;
    }

</style>
<body>
  
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
  </div>
  <div style="margin-top: 300px;"></div>
  
  <div class="parent2">
    <div class="child"></div>
    <div class="child"></div>
  </div>
</body>
</html>

在这里插入图片描述

overflow: hidden;属性清除内部浮动

在这里插入图片描述

3、自适应多栏布局

上面第三四个BFC规则
BFC的区域不会与float box重叠。
BFC内，每个盒子的左外边缘接触内部盒子的左边缘（对于从右到左的格式，右边缘接触）。即使在存在浮动的情况下也是如此。除非创建新的BFC。因此，可以触发生成一个新的BFC

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自适应多栏布局</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box {
      border: 1px solid black;
      padding: 10px;
    }
    .left {
        width: 50%;
        height: 150px;
        float: left;
        background: skyblue;
        text-align: center;
        line-height: 150px;
        font-size: 20px;
    }
    .right {
        /* overflow: hidden; */
        height: 300px;
        background: orange;
        text-align: center;
        line-height: 300px;
        font-size: 40px;
    }
    .right2 {
        overflow: hidden;
        height: 300px;
        background: orange;
        text-align: center;
        line-height: 300px;
        font-size: 40px;
    }
</style>
<body>
    <div class="box">
      <div class="left">LEFT</div>
      <div class="right">RIGHT</div>
    </div>
    <div style="margin-top: 50px;"></div>
    <div class="box">
      <div class="left">LEFT2</div>
      <div class="right2">RIGHT2</div>
    </div>
</body>
</html>