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. Linux中的文件描述符与打开文件之间的关系------------每天进步一点点系列

    http://blog.csdn.net/cywosp/article/details/38965239 1. 概述     在Linux系统中一切皆可以看成是文件,文件又可分为:普通文件.目录文件. ...

  2. 《Maven_孔浩》Maven命令

    maven命令: mvn compile:maven编译 mvn test:测试 mvn clean:删除编译生成的target文件 mvn package:运行编译.测试.package,把项目打包 ...

  3. Java队列实现

    队列数组实现:队列长度有限,但是考虑到平时一般都使用有界队列,这应该也不算是个缺点 public class Queue { private Object[] objs; private int he ...

  4. try{return} finally

    今天去逛论坛 时发现了一个很有趣的问题: 谁能给我我解释一下这段程序的结果为什么是:2.而不是:3? 代码如下: class Test { public int aaa() { int x = 1; ...

  5. Web前端发展简史

    Web前端发展简史 有人说“前端开发”是IT界最容易被误解的岗位,这不是空穴来风.如果你还认为前端只是从美工那里拿到切图, JS和CSS一番乱炖,难搞的功能就去网上信手拈来,CtrlC + Ctrl ...

  6. dedecms 首页分页功能

    1.需要引入 <script language="javascript" type="text/javascript" src="{dede:g ...

  7. db.class的实现类

    单例类,能操作数据库,能拼接sql语句,能写入日志 <?php class mysql extends db{ private static $ins=null; private $conn=n ...

  8. BSP模型

    http://www.uml.org.cn/yunjisuan/201212191.asp Hama中最关键的就是BSP(Bulk Synchronous Parallel-"大型" ...

  9. 第三章 jQuery中的DOM操作

    DOM(Document Object Model)文档对象模型,每张网页都能用DOM表示出来,每一份DOM都能看成一颗DOM树. jQuery继承了JavaScript对DOM对象操作的特性,使开发 ...

  10. 利用FSO取得BMP，JPG，PNG，GIF文件信息(大小，宽、高等)

    利用FSO取得BMP,JPG,PNG,GIF文件信息(大小,宽.高等) 程序代码 <% ':::BMP, GIF, JPG and PNG ':::This function gets a sp ...