Block formatting context:块级格式化上下文
1.前言
官方文档解释为:一个BFC区域包含创建该上下文元素的所有子元素,但是不包括创建了新的BFC的子元素的内部元素,BFC是一块块独立的渲染区域,可以将BFC看成是元素的一种属性,拥有了这种属性的元素就会使他的子元素与世隔绝,不会影响到外部其他元素。
怎么理解呢,我们通过以下代码来看:
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
<div class="box4">
<div class="box5"></div>
<div class="box6"></div>
</div>
</div>
假设box1和box4是两个BFC区域,那么根据上述原理能理解到的就是,box1这个BFC区域包含了子元素box2,box3,box4但不包括box56。而box4这块BFC区域则包含了box56这三个子元素。
综上,BFC有以下特点:
(1)每一个BFC区域只包括其子元素,不包括其子元素的子元素。
(2)每一个BFC区域都是独立隔绝的,互不影响

2.如何将一个区域设置为BFC区域呢
(1)float 的值不是 none

(2)position 的值不是static或者relative。

(3)display的值是inline-block、table-cell、flex、table-caption或者inline-flex

(4)overflow 的值不是 visible

(5)弹性布局flex

3.那么这个BFC到底有啥用处呢

由于它的独立性,也就是内部不干扰到外部,因此可以解决很多具体的问题,例如,如下:

(1)可以解决margin垂直塌陷问题。

比如纵向设置一个margin-bottom,和一个margin-top,但是实际两个元素之间的间距并不是这两个数值相加,而是重合的取最大值呈现的,要想达到相加的效果,就可以

给各自添加一个BFC的父元素。

(2)可以解决包含的塌陷问题。

有时候子元素的margin,会带着父亲一起跑,因此,可以设置父亲为BFC,这样里面元素的样式就不会影响到父亲的偏移,也就影响不到父亲外层的样式。

(3)清除浮动

大家都知道,浮动会导致父元素高度塌陷,那大家还记得怎么清除浮动吗?相信很多人都知道:overflow:hidden嘛。相信在认识BFC之前大家肯定不太清楚为什么overflow:hidden可以清除浮动。现在知道了,BFC区域内的子元素任何边动都是不会影响到外部元素的。所以BFC区域同样可以清除浮动带来的影响。

(4)BFC可以阻止标准元素流被浮动元素覆盖的问题。

例如,一个元素设置为absolute定位之后,它可能会漂浮以至于能够遮住其他元素,我们想设置浮动元素在某一块区域内运动,也就是说在一个盒子里面,一般的思路是找个父元素然后设置position定位,

此时学习了BFC之后,我们可以设置另外一个元素也就是不想被遮住的那一块为一个封闭的BFC,即overflow: hidden就可以使其不受外部的元素影响。完美解决问题了;

4.最后总结一下

一个BFC区域只包含其子元素,不包括其子元素的子元素。
并不是所有的元素都能成为一块BFC区域,只有当这个元素满足条件的时候才会成为一块BFC区域。
不同的BFC区域之间是相互独立的,互不影响的。利用这个特性我们可以让不同BFC区域之间的布局不产生影响。

BFC是什么?有什么作用的更多相关文章

  1. 浅析BFC布局的概念以及作用

    BFC的概念以及作用 BFC的定义: (Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-level box参与 ...

  2. 学习BFC

    BFC全称是Block Formatting Context,即块格式化上下文.它是CSS2.1规范定义的,关于CSS渲染定位的一个概念.要明白BFC到底是什么,首先来看看什么是视觉格式化模型. 视觉 ...

  3. 理解css的BFC

    BFC是CSS中一个看不见的盒子,(先理解CSS的盒子模型).它的页面渲染方式与普通流的盒子模型不同,它决定了其子元素将如何定位(所用属于BFC的box 都默认左对齐),以及和其他元素的关系和相互作用 ...

  4. CSS中重要的BFC

    CSS中有个重要的概念BFC,搞懂BFC可以让我们理解CSS中某些原本看似诡异的地方. 简介 在解释BFC之前,先说一下文档流.我们常说的文档流其实分为定位流.浮动流.普通流三种.而普通流其实就是指B ...

  5. 学习块格式化上下文(BlockFormattingContext)

    什么是BFC BFC全称是Block Formatting Context,即块格式化上下文.它是CSS2.1规范定义的,关于CSS渲染定位的一个概念.要明白BFC到底是什么,首先来看看什么是视觉格式 ...

  6. [转]学习块格式化上下文(BlockFormattingContext)

    原文:https://www.cnblogs.com/elcarim5efil/p/4745796.html   格式化上下文 格式化上下文( formatting contexts )├── 块级格 ...

  7. css整理之-----------布局相关

    文档流 文档流指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式布局,文档流可以分为定位流.浮动流.普通流三种 普通流(Normal flow) 在常规流中,盒一个接着一个排列, ...

  8. BFC的概念及作用

    在了解什么是BFC之前,首先得明白什么是Box , Formatting Context (一个决定如何渲染文档的容器)的概念 Box: CSS布局的基本单位 Box是 CSS 布局的对象和基本单位, ...

  9. BFC的作用及其应用

    简单介绍BFC BFC 就是块级格式化上下文,是页面盒模型布局中的一种 CSS 渲染模式,相当于一个独立的容器,里面的元素和外部的元素相互不影响. 创建 BFC 的方式有: 1.html的根元素 2. ...

  10. BFC的概念、BFC触发方式、BFC作用介绍

    一.BFC的概念 GFC——block fomatting context(中文译为块级格式化上下文) 二. 如何触发BFC 1. 设置 float 除 none 以外的值(left.right) 2 ...

随机推荐

  1. LabVantage仪器数据采集方案

    LabVantage的仪器数据采集组件为LIMS CI,是一个独立的应用程序/服务,实现仪器数据的采集(GC.LC等带有工作站的仪器). 将仪器输出数据转换为LIMS所需数据并传输,使用Talend这 ...

  2. k8s集权IP更换

    -.背景描述 背景:在场内进行部署完成后标准版产品,打包服务器到客户现场后服务不能正常使用,因为客户现场的IP地址不能再使用场内的IP,导致部署完的产品环境在客户现场无法使用:此方案就是针对这一问题撰 ...

  3. vue中动态引入图片为什么要是require, 你不知道的那些事

    相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require 有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所 ...

  4. vue 祖先组件操作后代组件方法

    前言:最近写代码遇到一问题:祖先级别的组件怎么操作孙子的儿子的组件方法(是不是已经绕晕了),在网上搜了半天都是父子传参,父子操作,晕晕乎乎的想起了bus(事件总线), 原理就是:是在vue原型上挂载( ...

  5. G1 垃圾收集器深入剖析(图文超详解)

    G1(Garbage First)垃圾收集器是目前垃圾回收技术最前沿的成果之一. G1 同 CMS 垃圾回收器一样,关注最小时延的垃圾回收器,适合大尺寸堆内存的垃圾收集.但是,G1 最大的特点是引入分 ...

  6. Python基础之模块:6、hashlib模块 subprocess模块 logging模块

    目录 一.hashlib模块 1.简介 2.基本操作与用法 二.subprocess模块 1.简介 2.基本操作与用法 三.logging模块 1.简介 2.基本操作与用法 一.hashlib模块 1 ...

  7. 元数据性能大比拼:HDFS vs S3 vs JuiceFS

    元数据是存储系统的核心大脑,元数据性能对整个大数据平台的性能和扩展能力至关重要.尤其在处理海量文件的时候.在平台任务创建.运行和结束提交阶段,会存在大量的元数据 create,open,rename ...

  8. 本地文件上传Gitee

    0.对于小白来说,我再细讲一下 一.下载git 下载细节参考博客 二.Git配置 点击桌面的图标,进入Git Bash Here 1.配置自己的用户名和邮箱 git config --global u ...

  9. vue3 结合 element-plus 框架实现增删改查功能(不连接数据库)

    一.效果图 二.代码 2.1.导入依赖(已经安装过node.js) npm install element-plus --save 注意:要是安装失败,可以使用淘宝镜像进行下载,如下: 2.2.设置淘 ...

  10. 基于.NET 7 的 WebTransport 实现双向通信

    Web Transport 简介 WebTransport 是一个新的 Web API,使用 HTTP/3 协议来支持双向传输.它用于 Web 客户端和 HTTP/3 服务器之间的双向通信.它支持通过 ...