浅谈BFC(块格式化上下文)

flym_

已于 2022-06-13 15:36:35 修改

阅读量153

点赞数

分类专栏： css 文章标签： css 前端 BFC

于 2019-12-09 23:25:59 首次发布

本文链接：https://blog.csdn.net/u014689760/article/details/103467361

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在我们的开发中常听到BFC这个词，当要让我说出BFC 是什么，却不能很好的却解释，似懂非懂。反正就是没有清晰的理解，是这两天仔细阅读了相关资料加深自己对BFC理解。（BFC是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。）

什么是BFC

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

1 BFC是一个独立的布局环境，其中的元素布局是不受外界的影响。

2.如果一个元素符合触发 BFC 的条件，则 BFC 中的元素布局不受外部影响。

3.浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。

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

5.在一个 BFC 中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

BFC的原理布局规则

内部的Box会在垂直方向，一个接一个地放置
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反
BFC的区域不会与float box重叠
BFC是一个独立容器，容器里面的子元素不会影响到外面的元素
计算BFC的高度时，浮动元素也参与计算高度
元素的类型和display属性，决定了这个Box的类型。不同类型的Box会参与不同的Formatting Context。

怎样才能形成BFC

浮动元素 float的值不为none。
绝对定位元素（元素的 position 为 absolute 或 fixed）
overflow值不为 visible 的块元素
display值为 flow-root的元素
display的值为table-cell, table-caption, inline-block中的任何一个。
position的值不为relative和static。

BFC应用

防止字体环绕
自适应两（多）栏布局
清除内部浮动
防止margin重叠

实际代码中理解BFC

1.让浮动内容和周围的内容等高

在实际开发中我们会遇到浮动元素超出了父元素的高度。

<style>
.outer {
  border: 5px dotted rgb(214,129,137);
  width: 450px;
}
.aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }

    .main {
        /* height: 200px; */
        background: #fcc;
    }
</style>
<body>
  <div class="outer">
    <div class="aside"></div>
    <div class="main">I am a floated element.</div>
  </div>
</body>

1575904227(1).jpg

创建一个会包含这个浮动的BFC，通常的做法是设置父元素 overflow: auto 或者设置其他的非默认的 overflow: visible 的值。

.outer {
  border: 5px dotted rgb(214,129,137);
  width: 450px;
  overflow: hidden;
}

1575904393(1).jpg

2.不和浮动元素重叠

如果一个浮动元素后面跟着一个非浮动的元素，那么就会产生一个覆盖的现象，很多自适应的两栏布局就是这么做的。比如下图的效果，参考例子

<style>
.outer {
  border: 5px dotted rgb(214,129,137);
  width: 450px;
  position:  relative;
}
.aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }

    .main {
        height: 200px;
        background: #fcc;
    }
</style>
<body>
  <div class="outer">
    <div class="aside"></div>
    <div class="main">I am a floated element.</div>
  </div>
</body>

1575904599(1).png
由于两个box都处在同一个BFC中，都是以BFC边界为起点，如果两个box本身都具备BFC的话，会按顺序一个一个排列布局,我们这时可以触发main生成BFC。

    .main {
        height: 200px;
        background: #fcc;
        overflow: hidden;
    }

1575904889(1).jpg

flym_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
浅谈BFC(块格式化上下文)

在我们的开发中常听到BFC这个词，当要让我说出BFC 是什么，却不能很好的却解释，似懂非懂。反正就是没有清晰的理解，是这两天仔细阅读了相关资料加深自己对BFC理解。什么是BFCBFC:块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。BFC是一个独立的布局环.........
复制链接

扫一扫

专栏目录