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)

  1. <div style="border:1px solid #f00;overflow:hidden; ">
  2. <div style="width:100px; height:100px; background:green; float:left;">kaivon</div>
  3. </div>
  4. <div style="border:1px solid #f00;margin-top:100px; ">
  5. <div style="width:100px; height:100px; background:green; float:left;">kaivon1</div>
  6. <div style="width:100px; height:100px; background:red;overflow:hidden; ">kaivon2</div>
  7. </div>
  8. <div style="background:blue;margin-top:100px;overflow:hidden; ">
  9. <div style="width:100px; height:100px; background:green; margin-top:100px;">kaivon1</div>
  10. <div style="width:100px; height:100px; background:red; ">kaivon2</div>
  11. </div>
  12. <div style="margin-top:100px; border:1px solid red; ">
  13. <div style="width:100px; height:100px; background:green; margin:100px 0;">kaivon1</div>
  14. <div style="overflow:hidden;">
  15. <div style="width:100px; height:100px; background:red; margin:100px 0;">kaivon2</div>
  16. </div >
  17. </div>
                  overflow              针对超出父级的内容如何显示

                  visible               默认值,超出的内容会显示出来
                  auto                  如果内容超出了父级,那就出现滚动条,如果内容没有超出,那就不出现滚动条
                  hidden                超出的内容给隐藏掉              

scroll                不管内容是否超出都出现滚动条  

kaivon
kaivon1
kaivon2
kaivon1
kaivon2
kaivon1
kaivon2

                            

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

  1. hasLayout与BFC的触发条件

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

  2. BFC概念和作用,触发条件

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

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

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

  4. 10、网页制作Dreamweaver(扩展:各浏览器对 onunload 事件的支持与触发条件实现有差异)

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

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

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

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

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

  7. unity collider 和 trigger 触发条件

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

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

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

  9. GC详解及Minor GC和Full GC触发条件总结

    GC,即就是Java垃圾回收机制.目前主流的JVM(HotSpot)采用的是分代收集算法.与C++不同的是,Java采用的是类似于树形结构的可达性分析法来判断对象是否还存在引用.即:从gcroot开始 ...

随机推荐

  1. linux日志文件

    linux日志文件 在系统运行正常的情况下学习了解这些不同的日志文件有助于你在遇到紧急情况时从容找出问题并加以解决. /var/log/messages — 包括整体系统信息,其中也包含系统启动期间的 ...

  2. 【转载】动态新增svg节点

    原文地址:http://blog.csdn.net/tomatomas/article/details/50442497 原文作者:番茄大圣 创建svg节点时,要使用createElementNS函数 ...

  3. idea添加内存

    在idea安装目录下的以下两个文件: 添加内存:

  4. 【LeetCode】66 &amp; 67- Plus One &amp; Add Binary

    66 - Plus One Given a non-negative number represented as an array of digits, plus one to the number. ...

  5. Web API 依赖注入与扩展

    与 MVC 类似, Web API 提供了System.Web.Http.Services.IDependencyResolver 接口来实现依赖注入, 我们可以很容易的用 Unity 来实现这个接口 ...

  6. coreldraw圆形裁剪

    裁剪方法: http://zhidao.baidu.com/link?url=9-OuTkkr7igOHgKDOhJgU6iUYY5MeGEGdNXX8p6RGq79Im4va0UdMAmH4gSDz ...

  7. HDU ACM 2586 How far away ?LCA-&amp;gt;并查集+Tarjan(离线)算法

    题意:一个村子有n个房子,他们用n-1条路连接起来,每两个房子之间的距离为w.有m次询问,每次询问房子a,b之间的距离是多少. 分析:近期公共祖先问题,建一棵树,求出每一点i到树根的距离d[i],每次 ...

  8. Javascript 封装问题

    Javascript 封装问题 为什么会用这样一个题目呢,这是要说封装的什么问题,本文并不讲高深的封装理论,只是解决一个小问题. 问题来源 今天在百度知道上闲逛,遇到一个网友的问题,问题如下,问题的地 ...

  9. 取消a标签在移动端点击时的背景颜色

    一.取消a标签在移动端点击时的蓝色 -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-select: none; -m ...

  10. dropout理解:1神带9坑

    Dropout是深度学习中防止过拟合的一项非常常见的技术,是hinton大神在12年提出的一篇论文里所采用的方法.有传言hinton大神的数学功底不是很好,所以他所提出的想法背后的数学原理并不是很复杂 ...