一、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. ApplicationListener原理分析

    在 Nacos配置服务原理 文中结束时提到过通过发布 ApplicationListener 刷新事件完成 Context 中属性值的更新.那么本章我们一起分析 ApplicationListener ...

  2. DVWA reCAPTCHA key: Missing

    修改dvwa文件夹下文件config.inc.php change: $_DVWA[ 'recaptcha_public_key' ] = ' '; $_DVWA[ 'recaptcha_privat ...

  3. C# struct结构知识总结

    结构是一种值类型,使用struct关键字定义. 结构可以包含字段.常量.事件.属性.方法.构造函数.索引器.运算符和嵌套类型.但若结构中同时需要上述所有成员,应考虑将结构改为类. 嵌套类型:在类或构造 ...

  4. Length of LOB data (190999) to be replicated exceeds configured maximum 65536. 错误修改

    在上传附件时,本地是可以的但服务器上就有了文件大小的限制,不能上传.经过打断点找到这样一个错误: Length of LOB data (190999) to be replicated exceed ...

  5. HTTP缓存总结

    在具体了解 HTTP 缓存之前先来明确几个术语:1.缓存命中率:从缓存中得到数据的请求数与所有请求数的比率.理想状态是越高越好.2.过期内容:超过设置的有效时间,被标记为“陈旧”的内容.通常过期内容不 ...

  6. Centos7:Redis的安装,配置及使用

    安装依赖与环境 yum install gcc-c++ 解压缩redis 编译,进入redis源码目录 make 安装 make install PREFIX=/usr/local/redis 注:P ...

  7. vue中使用proxy配置不同端口和ip接口

    问题描述: 使用vue-cli创建的项目,开发地址是localhost:8080,由于后台开发不同的模块,导致每个模块请求的ip和端口号不一致 例如:http://192.168.10.22:8081 ...

  8. PostMan 中使用Datas 文件一次Run 只能使用一个

    PostMan 一次run  只能有一个文件. Note that you can only use one data file for one run.

  9. 第三篇.python编辑器和集成环境01

    修改python的镜像源 使用pip可以提高网速 \Lib\site-packages\pip\models\index.py文件,将PYPI的值改为你所需要的镜像源即可,例如改为豆瓣镜像源: #Py ...

  10. php 获取网址参数

    echo "rewrite: ".$_GET["rewrite"]; echo "<br>SERVER_PORT: ".$_SE ...