【前端知识之CSS】对BFC的理解

饭啊饭°

已于 2022-07-18 09:36:50 修改

阅读量344

点赞数 1

分类专栏：前端知识之html+CSS 文章标签：前端面试 css

于 2022-05-11 15:44:33 首次发布

本文链接：https://blog.csdn.net/weixin_44337386/article/details/124709314

版权

本文主要探讨前端面试中的重要知识点——Block Formatting Context（BFC）。BFC是CSS布局的一个关键概念，用于解释元素如何在页面上定位。文章详细介绍了BFC的定义、触发条件以及在防止margin重叠、清除内部浮动和实现自适应多栏布局等场景中的应用。

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

前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍对BFC的理解。

一、什么是BFC

相关概念：
Box是CSS布局对象的基本单位，一个页面由多个Box组成，就是之前说过的盒子模型。
Formatting context：格式化上下文，是页面中一块渲染区域，有一套自己的渲染规则，决定了其子元素如何定位，以及和其他元素的交互限定区域。
BFC（Box Formatting context）：块级格式化上下文是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。
渲染规则：
（1）内部的盒子会在垂直方向上一个接一个的放置
（2）对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
（3）每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
（4）BFC的区域不会与float的元素区域重叠
（5）计算BFC的高度时，浮动子元素也参与计算
（6）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
BFC的目的：形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素。

二、触发条件

触发BFC的条件包括但不限于：

根元素，即body。
浮动元素：float值为left、right
overflow值不为 visible，为 auto、scroll、hidden
display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
position的值为absolute或fixed

三、使用场景

1、防止margin重叠（塌陷）

<style>
    p {
     
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align: center;
        margin: 100px;
    }
</style>
<body>
    <p