一、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. Treasure Island（两遍dfs）-- Codeforces Round #583 (Div. 1 + Div. 2, based on Olympiad of Metropolises)

    题意:https://codeforc.es/contest/1214/problem/D 给你一个n*m的图,每次可以往右或者往下走,问你使(1,1)不能到(n,m)最少要放多少 ‘ # ’ . 思 ...

  2. linux kprobe rootkit学习

    介绍 <linux二进制分析>中提到了使用kprobe来写内核rootkit,还给出了一个简单的源码实现,这里看一下他的源码 kprobe kprobe的介绍可以看下面这几篇文章 介绍:h ...

  3. linux lkm rootkit常用技巧

    简介 搜集一下linux lkm rootkit中常用的一些技巧 1.劫持系统调用 遍历地址空间 根据系统调用中的一些导出函数,比如sys_close的地址来寻找 unsigned long ** g ...

  4. iterm2 vim 开启滚轮

    之前使用mac自带终端时,可以通过上下滑动触摸板来在vim中快速浏览上下文.最近听说iterm2功能更加强大,索性试一试.发现默认没有这个功能,感觉应该可以通过配置实现,于是在iterm2的prefe ...

  5. Http 协议学习

    借助[小坦克:HTTP 协议教程] 1.HTTP协议是什么 协议是计算机在通信过程中必须共同遵守的规则,我的理解是类似所有汽车在行驶过程中必须共同遵守的交通规则一样. http协议叫超文本协议,是一种 ...

  6. pat L2--005 简单复习一下并差集

    布置宴席最微妙的事情,就是给前来参宴的各位宾客安排座位.无论如何,总不能把两个死对头排到同一张宴会桌旁!这个艰巨任务现在就交给你,对任何一对客人,请编写程序告诉主人他们是否能被安排同席. 输入格式: ...

  7. webpack权限控制

    const type= "a"; const menusConfig = { a: ["activity"], b: ["activity" ...

  8. Laravel save部分字段失效的bug问题解决

    问题描述:今天在编写api的更新部分,发现有部分字段怎么更新都更新不上去. 问题排查: 经过多次测试,发现每次提交只能更新部分字段,字段分别为:id,user_id,device_room_id,na ...

  9. JavaScript函数尾调用与尾递归

    什么是函数尾调用和尾递归 函数尾调用与尾递归的应用 一.什么是函数的尾调用和尾递归 函数尾调用就是指函数的最后一步是调用另一个函数. //函数尾调用示例一 function foo(x){ retur ...

  10. vue-无限滚动

    <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto& ...