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. Nginx 502错误触发条件与解决办法汇总(转载)

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

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

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

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

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

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

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

  6. unity collider 和 trigger 触发条件

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

  7. Android:View中的performClick()触发条件

    http://blog.sina.com.cn/s/blog_70ae1d7b0102v7uk.html 先看看performClick()源码:   public boolean performCl ...

  8. XSS代码触发条件,插入XSS代码的常用方法

    1.脚本插入 (1)插入javascript和vbscript正常字符. 例1:<img src=”javascript:alert(/xss/)”> 例2:<table backg ...

  9. Oracle触发器Trigger4触发条件_when的使用

    /* 同一表使用所有条件 Create or replace trigger t5 Before insert,delete,update on 表名 For each row //plsql块 */ ...

随机推荐

  1. Commons-Collections 集合工具类的使用

    package com.bjsxt.others.commons; import java.util.ArrayList; import java.util.List; import org.apac ...

  2. 转:Ajax中的get和post两种请求方式的异同

    1. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到.post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML ...

  3. python 练习购物车小程序

    # -*- coding:utf-8 -*- shp = [ ['iphone',5000], ['offee',35], ['shoes',800] ] pric_list = [] e = int ...

  4. PF_RING 实验

    前提:pf_ring.ko 运行在模式2    收包实验:        使用两台机器同时对装PF_RING的机器进行发包,此机器的网卡流量达到14M的效果.如下所示:     上图为PF_RING自 ...

  5. remove duplicates in Postgres(sql去重)

    A frequent question in IRC is how to delete rows that are duplicates over a set of columns, keeping ...

  6. 理解Python元类(转)

    add by zhj:先收藏了,有时间看,图倒是不少,可以配合stackover flow上那篇文章一起看 原文:http://blog.ionelmc.ro/2015/02/09/understan ...

  7. 2013年山东省第四届ACM大学生程序设计竞赛 Alice and Bob

      Alice and Bob Time Limit: 1000ms   Memory limit: 65536K 题目描述 Alice and Bob like playing games very ...

  8. 【数据库】MySql常用函数梳理

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/5866388.html MySql常用函数梳理: 1:数学函数 使用格式:一般用于插入.修改语句中,直接 函数( ...

  9. Android下得到已安装Application信息

    在上一篇blog中,谈到如何利用APK archive文件得到相应信息.(当时发现例如ProcessName,DataDir等信息,其实是无法得到的). 当前咱们看看如何通过系统取得已经安装的Appl ...

  10. telnet简单操作 模拟请求

    telnet简单操作   模拟请求 一: 二: 三: 按照以上操作即可!