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. jquery批量绑定click事件

    jquery批量绑定click事件: var selects = $(".public_select dd ul li"); debugger; /*$(".public ...

  2. Method Swizzing中一般替换方法都写在Category类别里吗？有没有别的实现方式

    Method Swizzing中一般替换方法都写在Category类别里吗?有没有别的实现方式 Method Swizzing中一般替换方法都写在Category类别里吗?有没有别的实现方式 > ...

  3. windows 下读取文件名称和类型

    def getFileWithType(self,xname): # xname='E:\\python\\recievedir\\data.pkl' # xname='E:\python\test. ...

  4. 用Python定时爬取网站最新资源

    记录一下. 写做个网站,爬了另一个网站的内容来做自己网站的内容. 把脚本挂到服务器,每隔一个小时去爬一次资源,然后保存到一个HTML文件里. 用flask做web对接,当有请求的时候就返回那个HTML ...

  5. Pythonx_day1

    # python3中的 str 和 byte(即二进制)转换 msg = "β" # 转换为二进制,打印,‘encoding = 'utf-8'为值定转换原str的编码格式’ pr ...

  6. Mysql学习总结（1）——常用sql语句汇总

    一.基础 1.说明:创建数据库 CREATE DATABASE database-name  2.说明:删除数据库 drop database dbname 3.说明:备份sql server --- ...

  7. Spring学习总结（3）——Spring配置文件详解

    Spring配置文件是用于指导Spring工厂进行Bean生产.依赖关系注入(装配)及Bean实例分发的"图纸".Java EE程序员必须学会并灵活应用这份"图纸&quo ...

  8. Android编译环境配置

    Android编译环境配置 网上关于Android编译环境配置的整理资料有不少,经整理亲测后,希望能给需要的亲们提供帮助. 主要分为四步: 1.安装JDK(Java Standard Edition ...

  9. Lesson 2 Building your first web page: Part 3

    Time to build your first HTML page by hand I could go on with more theory and send half of you to sl ...

  10. ASE加、解密

    AES已经变成目前对称加密中最流行算法之一:AES可以使用128.192.和256位密钥,并且用128位分组加密和解密数据. /** * 加密 * * @param content 需要加密的内容 * ...