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. idea报错。Error:Failed to load project configuration: cannot parse xml file E:\project\.idea\workspace.xml: Error on line 1: 前言中不允许有内容。

    因为电脑卡死强制重启电脑后打开idea,进行junit单元测试报错: idea报错.Error:Failed to load project configuration: cannot parse x ...

  2. 基于JavaSwing的例子-非连接数据库

    项目结构: Constant.java package com.mstf.test; import java.io.Serializable; public class Constant implem ...

  3. 关于概率算法的问题,不知道逻辑错在哪里,求debug

    做个骰子成功几率的分析,投n颗骰子,第一次投成功的几率是a,然后投成功的骰子,需要再投1次,这次成功的几率是b.第二次成功的骰子才算最终成功. 要分析出n颗骰子,最终成功0到n颗的概率. 我写了个算法 ...

  4. Python3基础笔记---re模块

    参考博客: Py西游攻关之模块 就其本质而言,正则表达式(或 RE)是一种小型的.高度专业化的编程语言,(在Python中)它内嵌在Python中,并通过 re 模块实现.正则表达式模式被编译成一系列 ...

  5. centos6.9安装virtualenv并配置python2.7环境

    一. 安装python2.7 解压文件 tar -xvf Python-2.7.14.tar 进入源码包目录 cd Python-2.7.14 开始构建之前指定安装的目录 默认会被安装进 /usr/l ...

  6. Object-C,四则运算计算器

    下面是是一个比较复杂的类. 定义一个四则运算计算器Caculator的接口和实现. 在main函数中,让用户输入四则运算表达式,比如a+b,a-b. 最后,在控制台输出结果. 用到的语法:接口.类的定 ...

  7. oracle基础入门(四)

    一:其实oracle的语法跟sql servce 挺像的只有一些个别的差异而已 1):安装Oracle的数据库一般它的表中会自带了两站表: 是 emp(员工表) , dept(部门) 单表查询 sel ...

  8. C# Expression 树转化为SQL与语句(二)--解决参数问题

    在用Expression解析的的时候碰到一些参数(不是具体的值),会出现这种情况. 在这里我们希望得到的是id=10,而不是id=m_id;那如何来解析这些参数? ================== ...

  9. Liquibase简介(1)

    Liquibase是一个用于跟踪.管理和应用数据库变化的开源的数据库重构工具.它将所有数据库的变化(包括结构和数据)都保存在XML文件中,便于版本控制. Liquibase具备如下特性: * 不依赖于 ...

  10. linux(debian/ubuntu)下连接安卓手机--小米4为例

    更改:如今小米连接Ubuntu等Linux系统,直接改动手机上的连接方式就可以. --------------------------------------------- 因为安卓手机底层就是lin ...