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. FlatternMap和Map的区别

    flattenMap使用步骤:     1.传入一个block,block类型是返回值RACStream,参数value     2.参数value就是源信号的内容,拿到源信号的内容做处理     3 ...

  2. d3 bubble源码分析

    技术 d3.d3.pack.d3.hierarchy 展示 https://bl.ocks.org/xunhanliu/e0688dc2ae9167c4c7fc264c0aedcdd1 关于怎么使用, ...

  3. 紫书 习题 10-12 UVa 557（概率计算）

    开始的时候我没有考虑1/2的概率,直接一波组合数,然后WA 后来去看题解发现我们可以反过来想,求最后两个人不一样的情况 这个时候肯定会抛到最后的 所以每一种可能就是(0.5)^(n - 2),然后一共 ...

  4. 【转】[译]理解HTTP/304响应

    [转][译]理解HTTP/304响应 原文:http://www.telerik.com/automated-testing-tools/blog/eric-lawrence/12-11-06/und ...

  5. NYOJ_77 开灯问题

    题目地址 分析: 用一个数组来保存每盏灯的操作的次数.推断奇偶就可以推断灯的状态. 最后的输出格式须要注意一下空格的位置,思路就是现输出一个.剩下来的输出在前面加一个空格. 空格用_表示: 1_3_5 ...

  6. sql暂时表的创建

    create table #simple  /*仅仅对当前用户有效.其它用户无法使用,断掉连接后马上销毁该表*/ ( id int not null ) select * from #simple c ...

  7. Android 4.3 系统裁剪——删除不使用的app及添加自己app

    删除不使用的apk 系统自带的app位置是在/android4.3/packages/apps 以下是一些APP作用分析: | |– BasicSmsReceiver | |– Bluetooth ( ...

  8. 《R实战》读书笔记一

    你仅仅要想处理数据,<R实战>这本书就能够助你一臂之力. <R实战>的目标是让你认识R,而且可以对数据进行操作.可视化和理解.该书包含4部分16个章节8个附录. 第一部分:入门 ...

  9. ios系统提示音的使用（不是铃声）

    AudioServices Jump to: navigation, search AudioServices is a group of C functions in AudioToolbox fo ...

  10. orm 通用方法——DeleteModel 主键删除

    定义代码: /** * 描述:删除对象 * 作者:Tianqi * 日期:2014-09-17 * param:model 对象实例,包含主键 * return:int 受影响行数 * return: ...