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. [Bootstrap] 2. class 'row' & 'col-md-x' & 'col-md-offset-x'

    Usually when desgin a web page, we think building the page in grid. Bootstrap can help us to do that ...

  2. android学习日记18--Adapter简介

    一.Adapter 1.简述 最近学的GridView和Gallery 都有用到Adapter适配器,发现它貌似蛮重要的.专门上网搜了下有关Adapter的资料.android绝大多数应用是JAVA语 ...

  3. Ubuntu10.04下载并编译Android4.3源代码

    注:转载或引用请标明出处    http://blog.csdn.net/luzhenrong45/article/details/9719433 去年用Ubuntu10.10成功下载并编译Andro ...

  4. 面试体验：Microsoft 篇（转）

    http://www.cnblogs.com/cathsfz/archive/2012/08/14/microsoft-interview-experience.html 在上一篇<面试体验:G ...

  5. 设置ISE/vivado中默认文本编辑器为gvim

    ise windows版,添加方式 ISE下点击菜单Edit -> Preferences -> Editor. 在Editor选项框里选择Custom,在Command line syn ...

  6. sharepoint 删除list里的所有内容

    [System.reflection.Assembly]::LoadWithPartialName("Microsoft.SharePoint") $siteUrl = " ...

  7. 关于hover没有效果的问题

    今天用vs2012写一个页面的是时候,用到hover的效果,原本是没有难度的事情,后来因为一个细节,导致浪费了点时间. 原来是我在css文件里面写完样式后,用了ctrl+k+D进行了格式化,然后vs在 ...

  8. 支持IE，FireFox，Chrome三大主流浏览器，通过js+Flash方式将table导出Excel文件

    今天在做项目的时候,遇到了前端下载Excel的功能,结果原先的代码,如下: function generate_excel(tableid) {        var table = document ...

  9. 对象创建型模式------Abstract Factory(抽象工厂）

    1. 意图    提供一个创建一系列相关或相互依赖对象的接口,而无需指定它们具体的类.2. 别名    Kit3. 动机        假设我们要开发一款游戏,当然为了吸引更多的人玩,游戏难度不能太大 ...

  10. Brackets 配置

    插件 Brackets Icons  左侧导航的文件图标 FuncDocr  注释工具 QuickDocsJS  js帮助文档 Beautify  格式化代码 Brackets Git  git支持 ...