1   .BFC的含义 ：         

Block Formatting Contexts（BFC）                                      块级元素格式化上下文

它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互关系

块级元素：父级（是一个块元素）

内容：子元素（是一个块元素）

其他元素：与内容同级别的兄弟元素

相互作用：BFC里的元素与外面的元素不会发生影响

         2.触发条件    ：      

触发BFC的方式（一下任意一条就可以）

1.float的值不为none

2.overflow的值不为visible

3.display的值为table-cell、tabble-caption和inline-block之一

4.position的值不为static或则releative中的任何一个

  3.FBC布局与普通文档流布局区别

普通文档流布局规则

1.浮动的元素是不会被父级计算高度

2.非浮动元素会覆盖浮动元素的位置

3.margin会传递给父级

4.两个相邻元素上下margin会重叠

BFC布局规则

1.浮动的元素会被父级计算高度（父级触发了BFC）

2.非浮动元素不会覆盖浮动元素位置（非浮动元素触发了BFC）

3.margin不会传递给父级（父级触发了BFC）

4.两个相邻元素上下margin不会重叠（给其中一个元素增加一个父级，然后让他的父级触发BFC

BFC的布局规则和触发条件的更多相关文章

  1. BFC的布局规则以及触发条件

          1   .BFC的含义 :          Block Formatting Contexts(BFC)                                      块级元 ...

  2. hasLayout与BFC的触发条件

    hasLayout与BFC是分别在IE和其他浏览器上的两个作用很相近的概念,在很多时候,我们需要触发它们去实现有些效果.例如清除浮动时需要触发hasLayout与BFC:很多自适应的两栏和三栏布局(两 ...

  3. BFC概念和作用，触发条件

    1.概念,全称是block format context,块级格式化上下文 2.触发条件 根元素 float属性不为none position为absolute或fixed display为inlin ...

  4. Nginx 502错误触发条件与解决办法汇总(转载)

    一些运行在Nginx上的网站有时候会出现“502 Bad Gateway”错误,有些时候甚至频繁的出现.有些站长是在刚刚转移到Nginx之后就出现了这个问题,所以经常会怀疑这是不是Nginx的问题,但 ...

  5. 10、网页制作Dreamweaver（扩展：各浏览器对 onunload 事件的支持与触发条件实现有差异）

    标准参考 在 HTML 4.01 规范中关于 onunload 事件的描述是:当 document 从 window 中移除时,触发 onunload 事件. 关于 HTML 4.01 规范中 onu ...

  6. Oracle DBWR,LGWR,CKPT,ARCH 触发条件 总结

    一.  DBWR写磁盘数据触发条件 1. 当进程在辅助LRU链表和主LRU链表上扫描以查找可以覆盖的buffer header[空闲缓冲区]时,如果已经扫描的buffer header的数量到达一定的 ...

  7. 各浏览器对 onbeforeunload 事件的支持与触发条件实现有差异

    转载:http://www.w3help.org/zh-cn/causes/BX2047 标准参考 无. 问题描述 一般情况下,onbeforeunload 事件处理函数内会写入一些提示性语句,当用户 ...

  8. unity collider 和 trigger 触发条件

    物体A,物体B(都含有collider组件) collider触发条件:A和B至少一方是  未勾选is Kinematic的rigidbody,且都未勾选 is trigger.当只有一方是rigid ...

  9. Major GC和Full GC的区别是什么？触发条件呢？

    作者:RednaxelaFX链接:http://www.zhihu.com/question/41922036/answer/93079526来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非 ...

随机推荐

  1. childNodes.length和form.length的不同

    我们知道,DOM里面提供了element.childNodes.length属性,childNodes 属性返回节点的子节点集合,以 NodeList 对象. 那么childNodes包含哪些节点呢? ...

  2. OpenGL编程逐步深入（六）平移变换

    准备知识 从这一节我们开始接触3D对象各种各样的变换,使其显示在屏幕上看起来有深度的感觉.通常每一种变换都是通过矩阵来实现的,把这些变换矩阵逐个的乘起来,然后用乘积乘以顶点位置.在每个教程中,我们致力 ...

  3. BootStrap--from 表单

    1 垂直表单(默认) 2 内联表单 3 水平表单 使用 class .sr-only,您可以隐藏内联表单的标签. 垂直或基本表单 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一 ...

  4. codeforces 400 D Dima and Bacteria【并查集 Floyd】

    题意:给出n个点,分别属于k个集合,判断每个集合里面的点的距离都为0,为0的话输出yes,并输出任意两个集合之间的最短路 这道题目有两个地方不会处理, 先是n个点,分别属于k个集合,该怎么记录下来这里 ...

  5. MyEclipse for mac 快捷键

    原文出处:http://blog.csdn.net/ray_seu/article/details/17384463 一直比较欣赏myeclipse的快捷键,网上搜索了一圈,发现windows平台下面 ...

  6. 洛谷1005 【NOIP2007】矩阵取数游戏

    问题描述 帅帅经常跟同学玩一个矩阵取数游戏:对于一个给定的n*m的矩阵,矩阵中的每个元素aij均为非负整数.游戏规则如下: 1.每次取数时须从每行各取走一个元素,共n个.m次后取完矩阵所有元素: 2. ...

  7. Mac系统下安装pip

    Mac下 pip的安装 编译 Python3.7 终端输入: curl https://bootstrap.pypa.io/get-pip.py | python3 1 安装完成,检查版本信息 pip ...

  8. FastDFS学习总结(2)--Tracker与Storage配置详解

    1.Tracker基本配置 # is this config file disabled # false for enabled # true for disabled disabled=false ...

  9. Android 6.0 执行时权限处理全然解析

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/50709663: 本文出自:[张鸿洋的博客] 一.概述 随着Android 6. ...

  10. Linux软防火墙ACL匹配的优化点

    首先.请求不要再诬陷Netfilter.尽管它有一些固有性能损耗,但敬请不要将iptables和Netfilter等同,假设你要抓元凶,请直接说iptables,而不要说成Netfilter!     ...