一、BFC概念

　　BFC即Block Formatting Contexts(块级格式化上下文)，它属于普通流。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其他子元素将如何定位，以及和其他元素的关系和相互作用。具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。

二、触发BFC条件（只要元素满足以下任意一条即触发BFC特性）

  1. body根元素
  2. 浮动元素：float除none以外的值
  3. 绝对定位元素：position(absolute,fixed)
  4. display为inline-block,table-cells,flex
  5. overflow除了visible以外的值（hidden,auto,scroll）

三、BFC特性应用

  1. 阻止垂直外边距（margin-top,margin-bottom）折叠（属于同一个BFC的两个相邻块级元素的上下margin会发生重叠，分为两个BFC就可以取消这种margin重叠，触发其中一个div的BFC，使得两个div的margin重叠）
  2. BFC可以包含浮动的元素（清除浮动）
  3. BFC可以阻止元素被浮动元素覆盖（在第二个元素中加入overflow:hidden）

BFC的理解的更多相关文章

  1. CSS-02 BFC的理解

    两个概念 感觉BFC挺重要的,于是最近查阅网上资料后小结一下,如果有不对的地方还望指正. 先理解两个概念: BOX :盒子模型 Block-Leave Box :块级元素 display属性为bloc ...

  2. BFC的理解与应用

    什么是BFC(Block formatting contexts) BFC的通俗理解: 首先BFC是一个名词,是一个独立的布局环境,我们可以理解为一个箱子(实际上是看不见摸不着的),箱子里面物品的摆放 ...

  3. BFC深入理解

    BFC 在上一篇文章中,清除浮动方法解析,我们谈及了一些使用css属性解决浮动带来的影响.但是在解决浮动带来的影响的方法中,如果细心思考,会产生如下疑问: 为什么overflow可以清除浮动带来的影响 ...

  4. 关于css盒子模型和BFC的理解

    CSS盒子模型 包含元素内容(content).内边距(padding).边框(border).外边距(margin) 一般元素总宽度 = element的width+padding的左右边距+mar ...

  5. 我对BFC的理解

    最初这篇文章打算回答寒冬大神的第一问,谈谈CSS布局.本来呢我以为布局主要涉及float跟display相关属性,以及他们的包含框.静态位置等等.后来看了大神的一片面试文章,嗯?这里怎么还有个BFC, ...

  6. 关于由CSS2.1所提出的的BFC的理解与样例

    今天在这里谈谈css中BFC.“BFC”是Block Formatting Context的缩写,这个概念是由CSS2.1提出来的,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.满 ...

  7. 对BFC的理解

    转载http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html 在解释 BFC 是什么之前,需要先介绍 Box.Formatt ...

  8. 我对CSS中的BFC的理解

       1.什么是BFC 其实在老师让我们写这篇叫BFC的时候,我跟本不知道有什么BFC的东西. 后来,我找了一些资料,知道了,BFC是Block Formatting Context (块级格式化上下 ...

  9. 浅谈BFC的理解

    在 web 页面布局中,有三种控制元素版式布局的模型: 普通流 (Flow) 元素在 HTML 中按照先后位置从上至下的流式排列方式布局. 浮动流(Float) 在浮动布局中,元素首先按照普通流的位置 ...

  10. 对 BFC 的理解

    对CSS有了解的道友们肯定都知道盒式模型这个概念,对一个元素设置CSS,首先需要知道这个元素是block还是inline类型.而BFC就是用来格式化块级盒子,同样管理inline类型的盒子还有IFC, ...

随机推荐

  1. 小a的强迫症 题解

    题面: 小a是一名强迫症患者,现在他要给一群带颜色的珠子排成一列,现在有N种颜色,其中第i种颜色的柱子有num(i)个.要求排列中第i种颜色珠子的最后一个珠子,一定要排在第i+1种颜色的最后一个珠子之 ...

  2. Redis-数据结构与对象-对象

    1. 作用 Redis使用对象作为五种不同类型的底层实现,字符串,列表,哈希,集合,有序集合等 而对象是基于之前的分析的数据结构创建的.每个对象都至少用到一种数据结构,这意味着,Redis五大类型,底 ...

  3. 【hash】A Horrible Poem

    [题目链接] # 10038. 「一本通 2.1 练习 4」A Horrible Poem [参考博客] A Horrible Poem (字符串hash+数论) [题目描述] 给出一个由小写英文字母 ...

  4. 怎样使用 vue-cli ( Vue 脚手架 )

    vue-cli 是 Vue 官方出品的快速构建单页应用的脚手架, 相当于 React 官方出品的 create-react-app , 下面演示 vue-cli 的 最 基本用法: 1. 全局安装 v ...

  5. ModbusRtu通信报文详解【一】

    Modbus协议可谓是工业控制领域应用最广泛的协议之一.根据不同的电气接口,包括Modbus Rtu/ASCII,Modbus TCP/UDP,从学习的角度来说,只要学会其中一种,剩余的都是大同小异的 ...

  6. luogu题解P4198楼房重建--线段树神操作

    题目链接 https://www.luogu.org/problemnew/show/P4198 分析 一句话题意,一条数轴上有若干楼房,坐标为\(xi\)的楼房有高度\(hi\),那么它的斜率为\( ...

  7. 学习笔记--三分法&秦九韶算法

    前言 其实也没什么好说的吧,三分法就是用来求一个单调函数的最值和满足最大值的\(x\),秦九韶算法就是在\(O(N)\)时间内求一个多项式值 怎么用 三分法使用--看这篇:https://www.cn ...

  8. vim之快捷键

    Vim 编辑器是一个基于命令行的工具,是传奇编辑器 vi 的增强版.尽管图形界面的富文本编辑有很多,但是熟悉 Vim 对于每一位 Linux 的使用者都能有所帮助——无论你是经验丰富的系统管理员,还是 ...

  9. 如何将webstrom本地的代码上传到github上

    首先注册一个github账户,然后下载一个git软件. 文件夹的任意处点击右键,找到gitbash here,打开终端命令窗口.  因为我们本地 Git 仓库和 GitHub 仓库之间的传输是通过 S ...

  10. Android Jetpack之WorkManager: 观察结果

    在使用WorkManager的时候,有时候需要关注任务执行的结果和状态,可以使用 LiveData<WorkInfo> liveOpStatus = WorkManager.getInst ...