一、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. 基于Opencv快速实现人脸识别（完整版）

    无耻收藏网页链接: 基于OpenCV快速实现人脸识别:https://blog.csdn.net/beyond9305/article/details/92844258 基于Opencv快速实现人脸识 ...

  2. Linux系列（10）：入门之bash基础与bash环境设置

    了解什么是shell吗? 知道如何查询当前系统支持的shell版本吗? 了解如何判断某个指令是否是bash的内置指令吗? 了解Linux的变量吗,知道如何定义与删除变量吗,知道如何赋值吗,知道如何获取 ...

  3. E.XKC's basketball team（The Preliminary Contest for ICPC Asia Xuzhou 2019）

    https://nanti.jisuanke.com/t/41387 解: 离散化+线段树. #define IOS ios_base::sync_with_stdio(0); cin.tie(0); ...

  4. Python三大主流框架的对比

    相信做Python这一块的程序员都有听说这三个框架,就像神一样的存在,每一个框架的介绍我就不写出来了,感兴趣可以自己百度了解了解!下面我就说正事 Django:Python 界最全能的 web 开发框 ...

  5. C - 简易贪吃蛇的编写

    不多废话,直接进入正题——用C编写简易贪吃蛇.附上拙劣的源码 * c-snake * 首先说明使画面动起来的原理:通过 system("cls"); 清除当前控制台的显示,再pri ...

  6. JS基础_赋值运算符

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. 异常-try...catch的方式处理异常2

    package cn.itcast_02; /* * A:一个异常 * B:二个异常的处理 * a:每一个写一个try...catch * b:写一个try,多个catch * try{ * ... ...

  8. mysql命令行的一些小技巧【实用：多屏显示，格式化输出等】

    1.以html格式输出结果使用mysql客户端的参数–html或者-T,则所有SQL的查询结果会自动生成为html的table代码$ mysql -u root --htmlWelcome to th ...

  9. Centos7搭建solr集群

    1.复制4个Tomcat到solr-cloud目录下 [root@localhost software]# cp -r apache-tomcat-9.0.24 /usr/local/solr-clo ...

  10. axiso基本使用及python接收处理

    安装$ npm install axios 1.发送get请求: axios.get("/api/v1.0/cars?id=132").then(function(res){ co ...