block formatting context(块级格式化上下文)

如何产生BFC：当一个HTML元素满足下面条件的任何一点，都可以产生Block
Formatting Context：

  • float的值不为none。
  • overflow的值不为visible。
  • display的值为table-cell, table-caption, inline-block中的任何一个。
  • position的值不为relative和static。

要清除一个块级元素范围内的浮动，也就是让这个块级元素成为一个新的独立的BFC，可以采取上面的方法，例如使这个块级元素的overflow:hidden

css--block formatting context的更多相关文章

  1. css Block formatting context BFC

    w3c关于BFC解释: http://www.w3.org/TR/CSS21/visuren.html#block-formatting Mdn描述: A block formatting conte ...

  2. CSS BFC(Block Formatting Context)

    BFC是 W3C CSS 2.1 规范中的一个概念Block Formatting Context的缩写即格式化上下文,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.简单讲,它是提 ...

  3. Block formatting context(块级格式化上下文)

    今天看到豆瓣面试官的一篇文章,讲到关于CSS中的一个知识点:Block formatting context  ,感觉这个确实挺有用,同时我也挺赞同作者的一些观点的,这里就不展开谈我的感受了, 此文只 ...

  4. 【转】关于Block Formatting Context－－BFC和IE的hasLayout

    转自穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为“块级格式化范围”. 是 W3C CSS ...

  5. 块级格式化上下文(block formatting context)、浮动和绝对定位的工作原理详解

    CSS的可视化格式模型中具有一个非常重要地位的概念——定位方案.定位方案用以控制元素的布局,在CSS2.1中,有三种定位方案——普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inli ...

  6. 浅入“Block Formatting Context”

    本文主要是针对BFC特性的应用,至于什么是BFC,可以参看MDN的简介: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_fo ...

  7. 关于Block Formatting Context－－BFC和IE的hasLayout

    转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为"块级格式 ...

  8. Block formatting context

    不会JS中的OOP,你也太菜了吧!(第一篇)   一.你必须知道的 1) 字面量 2) 原型 3) 原型链 4) 构造函数 5) 稳妥对象(没有公共属性,而且其方法也不引用this的对象.稳妥对象适合 ...

  9. 什么是BFC（Block Formatting Context）

    原文:https://segmentfault.com/a/1190000012221820 https://www.w3.org/TR/CSS2/visuren.html#block-formatt ...

  10. BFC (Block formatting context)

     一:BFC 是什么      MDN解释: A block formatting context is a part of a visual CSS rendering of a Web page. ...

随机推荐

  1. SQL判断汉字

    /* unicode编码范围: 汉字:[0x4e00,0x9fa5](或十进制[19968,40869]) 数字:[0x30,0x39](或十进制[48, 57]) 小写字母:[0x61,0x7a]( ...

  2. Datatypes In SQLite Version 3

    http://www.sqlite.org/datatype3.html http://stackoverflow.com/questions/7337882/what-is-the-differen ...

  3. [HDOJ5950]Recursive sequence（递推，二项展开，矩阵快速幂）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5950 题意:求解递推式f(n)=f(n-1)+2*f(n-2)+n^4. 写了个小东西,不过我的文章里 ...

  4. CUBRID学习笔记 15 Lobs类型数据

    BLOB: Binary large object CLOB: Character large object 一个二进制 一个字符类型 二进制的读取 CUBRIDCommand cmd = new C ...

  5. CUBRID学习笔记 8 复制数据库

    1  export  database  类似sqlserver的分离数据库 cubrid unloaddb demodb分离后生成三个文件 demodb_objects, demodb_indexe ...

  6. git sshkeygen Fingerprint cannot be generated解决方法

    ssh-keygen -t rsa -C "xxx@xxx.com"   生成后使用cat或者vim 查看该rsa,然后复制到github的ssh keys中:     提示:   ...

  7. mysql密码忘记或者不知道，怎么办？

    运行cmd: 输入mysql回车,如果成功,将出现MySQL提示符 > 连接权限数据库>use mysql; (>是本来就有的提示符,别忘了最后的分号) 修改改密码:> upd ...

  8. 常见的PC端和移动端表单组件

    http://files.cnblogs.com/samwu/PC%E7%AB%AF%E5%89%8D%E7%AB%AF%E4%BA%A4%E4%BA%92%E7%BB%84%E4%BB%B6.rar

  9. POJ2676，HDU4069解决数独的两种实现：DFS、DLX

    搜索实现:解决数独有两种思考策略,一种是枚举当前格能填的数字的种数,这里有一优化策略就是先搜索能填入种数小的格子:另一种是考虑处理某一行(列.宫)时,对于某一个没用过的数字,若该行(列.宫)只有一个可 ...

  10. css处理浏览器兼容问题

    浏览器的兼容: _ ie6认识 格式:_width:100px;要写在最后面来覆盖前面的. * ie6和ie7都认识 格式:* width:100px;要写在最后面来覆盖前面的. \0 ie8认识  ...