BFC详解,从官方定义到上机实操

最新推荐文章于 2023-02-02 15:29:24 发布

我是梅哥

最新推荐文章于 2023-02-02 15:29:24 发布

阅读量426

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/cjm13249425280/article/details/106045448

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

官方定义

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

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

块格式化上下文包含创建它的元素内部的所有内容。

块格式化上下文对浮动定位（参见 float）与清除浮动（参见 clear）都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间。

以上就是MDN官方文档的部分解说了，但是还是有点懵，现在我们看看正经的。。。。

创建BFC的条件（上面官方的说法有点啰嗦，我们再简单地总结一遍）

只要元素满足下面任一条件即可触发 BFC 特性：

body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)

BFC的布局规则(这个可以细品，看完下面的例子再回来看看）

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的左外边缘（margin-left)，与包含块的左边（contain box left）相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。除非这个元素自己形成了一个新的BFC。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

BFC可以解决什么问题？

利用BFC避免margin重叠
使BFC内部浮动元素不会到处乱跑
自适应两栏布局

一、利用BFC避免margin重叠

首先会发生margin重叠的肯定使同一个BFC内的块级元素，例如div，p，不是块级元素不会发生重叠。
具体的margin重叠请看这篇文章：BFC与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>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    p {
        color: #f55;
        background: yellow;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 30px;
    }
</style>
<body>
    <p>看看我的 margin是多少</p>
    <p>看看我的 margin是多少</p>
</body>
</html>

在这里插入图片描述
上面这张图很明显就是外边距重叠，这就满足了两个条件：同一个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>防止margin重叠</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    p {
        color: #f55;
        background: yellow;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 30px;
        float: left;
    }
    div {
    	overflow: hidden;
    }
</style>
<body>
    <p>看看我的 margin是多少</p>
    <div>
    <p>看看我的 margin是多少</p>
    </div>
</body>
</html>

在这里插入图片描述

二、使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>使BFC内部的浮动元素不会乱跑</title>
</head>
<style>
  .out {
    width: 100px;
    min-height: 30px;
    background-color: #ffeeaa;
  }
  .in {
    width: 80px;
    height: 100px;
    background-color: #aaccdd;
    float: left;
  }
</style>
<body>
    <div class="out">
        <div class="in"></div>
    </div>
</body>
</html>

在这里插入图片描述
这里其实有涉及到float元素，如果对float元素不是很熟悉建议去看我写的另一篇文章：CSS之float属性详解
上面我们可以看到里面的元素已经脱离了文档流，并没有被外面的元素包裹住，外元素高度坍塌，这时候我们可以给父节点（外元素）创建一个BFC，，BFC计算高度时会包括浮动的高度，使 BFC 内部的浮动元素不会到处乱跑。(创建BFC的方法有很多，这里我就不多说了，我采取的是给out添加向左浮动的方式）

<!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>使BFC内部的浮动元素不会乱跑</title>
</head>
<style>
  .out {
    width: 100px;
    min-height: 30px;
    background-color: #ffeeaa;
    float: left;
  }
  .in {
    width: 80px;
    height: 100px;
    background-color: #aaccdd;
    float: left;
  }
</style>
<body>
    <div class="out">
        <div class="in"></div>
    </div>
</body>
</html>

在这里插入图片描述

三、自适应两栏布局

先来看一个文字环绕效果：

<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div>
<div style="width: 200px; height: 200px;background: #eee">我是一个没有设置浮动, 
也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;</div>

在这里插入图片描述
这时候其实第二个元素有部分被浮动元素所覆盖，(但是文本信息不会被浮动元素所覆盖) 如果想避免元素被覆盖，可触第二个元素的 BFC 特性，在第二个元素中加入 overflow: hidden，就会变成：

这个方法可以用来实现两列自适应布局，效果不错，这时候左边的宽度固定，右边的内容自适应宽度(去掉上面右边内容的宽度)

总结

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

本文章参考了以下博客：

我是梅哥

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BFC详解,从官方定义到上机实操

官方定义**块级格式化上下文（Block Formatting Context，BFC）**是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程法神高度区域，也是浮动元素与其他元素交互的区域。下列方式之一都可以创建BFC：+ 根元素（<html>)+ 浮动元素（元素的float不是none）+ 绝对定位元素（元素的position为absolute或fixed）+ 行内块元素（元素的 display 为 inline-block）+ 表格单元格（元素的 display为 ta
复制链接

扫一扫