CSS篇：BFC(块级格式化上下文)

最新推荐文章于 2023-10-22 20:47:47 发布

Tsutosaki

最新推荐文章于 2023-10-22 20:47:47 发布

阅读量233

点赞数

分类专栏： CSS 前端文章标签： css css3 html5

本文链接：https://blog.csdn.net/Tsutosaki/article/details/104660550

版权

CSS 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

上篇文章：盒子模型

本篇主要讲的是 BFC，即块级格式化上下文，也可以被叫做隔离独立容器。我们将围绕以下几点来展开

BFC 的概念
BFC 的规则
如何创建 BFC
BFC 的应用

BFC的概念

BFC（Block formatting context），即块级格式化上下文，它作为HTML页面上的一个独立渲染区域，只有区域内元素参与渲染，且不会影响其外部元素。
简单来说，可以将 BFC 看做是一个“围城”，外面的元素进不来，里面的元素出不去（互不干扰）。

BFC的规则（原理）

同一个 BFC 中，内部的 BOX 相接，且 BOX 外边距(margin)会发现重叠（塌陷）
BFC 内外部元素互不干扰
计算 BFC 高度时，内部浮动元素也会参与计算（撑开父元素）
BFC 与浮动元素互不重叠（可以用此来解决自适应布局的问题）

如何创建BFC

overflow 属性设置为除 visible 以外的值
元素为 body 根元素
display 属性设置为 table-cell/inline-block/flex 中的任意值
float 设置为 none 以外的值

BFC的应用

BFC 一般用来解决以下几个问题

边距重叠问题
消除浮动问题
自适应布局问题

边距重叠问题

通过之前对 BFC 规则的阅读，我们知道同一BFC内部的盒子外边距会发生重叠，为了更好的理解这个现象，我们po一个demo来康康

<style>
    #box1 {
        width:100px;
        height:100px;
        margin-bottom: 20px;
        background-color: orangered;
    }
    #box2 {
        width: 100px;
        height: 100px;
        margin-top: 30px;
        background-color: orange;
    }
</style>
<body>
<div id="content">
    <div id="box1">1</div>
    <div id="box2">2</div>
</div>
</body>

效果
在这里插入图片描述

不难看出两个盒子的上下外边距发生了重叠，且以较大的外边距值为准！
为了解决这个问题，我们可以利用 BFC 的另一条规则
BFC内外部元素互不干扰

我们将 BOX2 设置为左浮动，即触发 BOX2 的BFC，观察效果

修改后的效果：
在这里插入图片描述

显然，边距重叠的问题通过触发BFC得到了解决

消除浮动问题

现在我们想要实现这样一个效果
在这里插入图片描述
我们很容易想到，可以将子元素设置为右浮动便能最快速的实现这个效果
但设置后却发现变成了这样

我们发现，父元素发生了坍塌，这其实是由于当我们设置浮动后，子元素脱离了正常文档流，使得渲染时无法得到我们想要的效果。而BFC 便成为解决这一问题的一种办法，利用 BFC的这一规则
计算 BFC 高度时，内部浮动元素也会参与计算（撑开父元素）
通过触发父元素的BFC使得我们能够撑开父元素。
我们可以对父元素设置 overflow: hidden，便能解决浮动问题。当然，清除浮动还有很多种办法，而这并不在这篇文章的探讨范围内，有兴趣的同学可以自行查阅资料。

自适应布局

BFC规则中有这样一条：BFC与浮动元素互不重叠 ，借此我们能实现一些基本的自适应布局，如两栏自适应

<style>
    #left {
        float: left;
        height: 200px;
        width: 200px;
        background-color: orange;
    }
    #right {
        height: 200px;
        background-color: skyblue;
        overflow: hidden;
    }
</style>
<body>
    <div id="left">1</div>
    <div id="right">2</div>
</body>