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. Encryption

    Encryption Configuration Basic Usage Encrypting a value Decrypting a value Configuration Before usin ...

  2. windows7怎么共享文件夹

    http://jingyan.baidu.com/article/d45ad148f06fef69552b80e6.html

  3. rem移动端适配

    rem作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The f ...

  4. 基于JQuery实现相同内容合并单元格[转]

    <script type="text/javascript"> jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery ...

  5. 关于Eclipse中的快捷键占用的解决.

    刚进公司用的之前离职员工的电脑,打开Eclipse经常用的一个alt+/ 内容提示快捷键就是不好使. 让同事帮忙之后才发现原因. 在eclipse中快捷键设置是在  windows---->pr ...

  6. IP地址子网掩码、主机数、子网掩码及主机段的算法

    http://wenku.baidu.com/view/2aa76cc6aa00b52acfc7ca6f.html很容易理解.

  7. LeetCode里有特色的问题存档

    002* Median of Two Sorted Arrays There are two sorted arrays A and B of size m and n respectively. F ...

  8. Socket知识总结

    一.网络编程相关概念 1. 互联网通过ip定位电脑 2. 在电脑中通过port定位程序 3. 程序和程序之间通过协议定义通信数据格式 二.Socket相关概念 1. ip地址 1) 每台联网的电脑都有 ...

  9. 仿php的日期函数，asp时间处理函数

    <% '****************************** '时间处理函数 'FormatDate(Str,DateTime) 'Str 字符串,DateTime 时间 '返回类型为字 ...

  10. android手机震动

    Vibrator是安卓提供的震动器,其没有构造器,通过getSystemService(Context.VIBRATOR_SERVICE)方法获取对象.但使用此类时需要在清单文件中添加访问权限andr ...