Box：CSS布局的基本单位

Formatting context是页面中的一块渲染区域，最常见的是BFC和IFC，CSS3增加了GFC和FFC

BFC定义：块级格式化上下文，它是一个独立的渲染区域，只有Block-level box参与，它规定了内

部的Block-level Box如何布局，并且与这个区域外部毫不相关。

BFC布局规则：

（1）内部的Box会在垂直方向，一个接一个地放置

（2）Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

（3）每个元素的margin box的左边与包含块border box的左边相接触。即使存在浮动也是如此。

（4）BFC区域不会与float box重叠

（5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也是

如此。

（6）计算BFC的高度时，浮动元素也参与计算

哪些元素会生成BFC？

（1）根元素

（2）float属性不为none

（3）position为absolute或fixed

（4）display为inline-block,table-cell,table-caption,flex,inline-flex

（5）overflow不为visible

BFC(Box,Formatting,Context) —— 块级格式化上下文的更多相关文章

  1. BFC --- Block Formatting Context --- 块级格式化上下文

    虽然知道块级格式化上下文是什么东西,但要我把这个东西给说清楚,还真的不是一件容易的事儿,所以这篇文章我就要说说清楚到底什么使传说中的BFC,即块级格式化上下文. 一.BFC的通俗理解 通俗的理解 -- ...

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

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

  3. 详说 Block Formatting Contexts (块级格式化上下文)

    在上文<详说清除浮动>中,Kayo 较为详细地介绍了 BFC ,也就是本文的主角 Block Formatting Contexts (块级格式化上下文),本文会基于上文关于 BFC 的部 ...

  4. Block Formatting Contexts (块级格式化上下文) 使用参考

    转自:http://kayosite.com/block-formatting-contexts-in-detail.html 在上文<详说清除浮动>中,Kayo 较为详细地介绍了 BFC ...

  5. Block Formatting Contexts (块级格式化上下文) 详解

         最近在学习BootStrap框架,发现里面清除浮动的类 .clearfix 跟平时自己用的不太一样.它的样式是这样的: .clearfix:before { content: " ...

  6. BFC 详说 Block Formatting Contexts (块级格式化上下文)

    定位方案是控制元素的布局,在 CSS 2.1 中,有三种定位方案——普通流 (Normal Flow) .浮动 (Floats) 和绝对定位 (Absolute Positioning) ,下面分别对 ...

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

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

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

    在CSS2.1中,有三种定位方案--普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inline元素水平排列,直到行被占满后换行,block元素则被渲染为完整的一行,除非指定,所有元素 ...

  9. 详解块级格式化上下文（BFC）

    相信大家和我一样,第一次听到别人说CSS 块级格式化上下文(block formatting context,简称:BFC)的时候一头雾水,为了帮助大家弄清楚块级格式化上下文,我翻阅了W3C的CSS规 ...

随机推荐

  1. There is no Action mapped for namespace [/pages/action/student] and action name [findStudent]

    1.错误描写叙述 2014-7-13 2:38:54 org.apache.jasper.compiler.TldLocationsCache tldScanJar 信息: At least one ...

  2. Android代码中设置背景图片

    //设置背景图片        String picfile= Environment.getExternalStorageDirectory() + "/pdp/pdp.png" ...

  3. android自动化测试中hierarchyviewer和uiautomatorviewer获取控件信息的方式比对

    http://blog.csdn.net/itfootball/article/details/21777835 http://blog.csdn.net/chenbang110/article/de ...

  4. Ajax防止重复提交

    转:http://www.cnblogs.com/jinguangguo/archive/2013/05/20/3086925.html 谈谈防止重复点击提交   首先说说防止重复点击提交是什么意思. ...

  5. Javascript中那些偏门的知识

     1.(functiong(){})() 和 (function(){}())有细微差别,()是强制运算符,第一种写法强制返回函数本身,然后调用:第二种写法是强制返回函数执行的结果. 2.json格式 ...

  6. C#_delegate - combine function

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Dele ...

  7. Socket异步通信学习二

    接下来是服务器部分,采用异步模式,新建了一个AsynServer类,用于存放socket服务器代码,主要有4个方法: 有一个全局socket,下面四个方法中都用到. Socket socket = n ...

  8. Java基础知识强化之IO流笔记63：随机访问流RandomAccessFile

    1. 随机访问流RandomAccessFile RandomAccessFile类不属于流,是Object类的子类.但它融合了InputStream和OutputStream的功能.支持对随机访问文 ...

  9. 按字母顺序排序的 arcpy.mapping 类列表

    arcpy.mapping 类可使用地图文档 (.mxd) 或图层文件 (.lyr) 中的不同对象类型的各种方法和属性.此文档可专门用作快速参考.有关详细信息,请使用链接跳转至各帮助页面. arcpy ...

  10. 深入理解计算机系统第二版习题解答CSAPP 2.16

    填写下表,说明不同移位运算对单字节数的影响. x x<<3 x>>2(逻辑) x>>2(算术) 十六进制 二进制 二进制 十六进制 二进制 十六进制 二进制 十六进 ...