Formatting context（FC）

　　Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC), IE浏览器中没有BFC的概念，但是有个差不多的东东叫做hasLayout 。

　　BFC（Block Formatting Context 块格式化上下文）：是W3C CSS 2.1 规范中的一个概念，在CSS3中被修改为flow root。格式化则表明了在这个环境中，元素处于此环境中应当被初始化，即元素在此环境中应当如何布局等。元素如果创建了BFC，那么BFC决定了如何对其内容进行定位，以及它与其他元素的关系和相互作用。

　　BFC的用处是：如清浮动，防止 margin 重叠等， 自适应的布局；

　　BFC的区域的元素是一块独立渲染区域， 不会受到其他块元素的影响；

　　如何触发BFC呢；

根元素html(quirk的body)默认就是BFC元素;

浮动元素(float:left 或者 float:right);

绝对得的元素(absolute; fixed);

display取值为inline-block,table-cell, table-caption,flex, inline-flex之一的元素;

overflow不是visible的元素;

　　BFC有哪些布局规则呢：

1:内部的box是一个一个垂直放置(按照标准文档流放置);

2:同一个BFC中的两个Box的margin会发生折叠; IFC的垂直方向会发生折叠;

3:每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

4:BFC的区域不会与float box重叠(利用这点可以做自动适应的布局，下面有例子);

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

6:计算BFC的高度时，浮动元素也参与计算(利用这点可以用来清除浮动);

　　利用BFC解决垂直方向margin叠加的问题;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>BFC</title>

</head>

<body>

<style>

body{

    margin:0px;

}

.bfc{

    overflow:hidden;

}

.box{

    width:400px;

    height:400px;

    margin:100px;

    background:#666;

}

.child{

    width:100px;

    height:100px;

    margin:100px;

    background:#f00;

}

.fl{

    float:left;

}

</style>

<div class="box">

    <div class="child"></div>

</div>

<div class="box bfc">

    <div class="child fl"></div>

</div>

</body>

</html>

　　BFC就是一写正常流，浮动流布局的一写规则，比如（BFC会自动计算元素内部的高度适应到父级,PS{ 可以用来清浮动} ）：

<!doctype html>

<head>

    <meta charset="utf-8" />

    <title>Clear float</title>

    <style>

        .container{

            margin: 30px auto;

            width:600px;

            height: 300px;

        }

        .wrapper{

            border:solid 3px #a33;

        }

        .main{

            width: 100px;

            height: 100px;

            background-color: #060;

            margin: 10px;

            float: left;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="wrapper">

            <div class="main"></div>

            <div class="main"></div>

            <div class="main"></div>

        </div>

    </div>

    <div class="container">

        <div class="wrapper" style="float:left;">

            <div class="main">1</div>

            <div class="main">2</div>

            <div class="main">3</div>

        </div>

    </div>

</body>

</html>

　　2:BFC的另一个规则，（BFC不会与浮动的元素发生叠加）：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

</head>

<body>

<style>

    body {

        position: relative;

    }

    .aside {

        width: 100px;

        height: 150px;

        float: left;

        background: #f66;

    }

    .main {

        height: 200px;

        background: #fcc;

    }

    .hd{

        overflow:hidden;

    }

</style>

    <div class="aside"></div>

    <div class="main"></div>

    <br>

    <div class="aside"></div>

    <div class="main hd"></div>

</body>

</html>

　　

　　IFC布局规则：

  1. 框会从包含块的顶部开始，一个接一个地水平摆放。
  2. 摆放这些框的时候，它们在水平方向上的外边距、边框、内边距所占用的空间都会被考虑在内。在垂直方向上，这些框可能会以不同形式来对齐：它们可能会把底部或顶部对齐，也可能把其内部的文本基线对齐。能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框。水平的margin、padding、border有效，垂直无效。不能指定宽高。
  3. 行框的宽度是由包含块和存在的浮动来决定。行框的高度由行高计算这一章所描述的规则来决定。

　　Containing  block的概念：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>BFC</title>

</head>

<body>

<p style="border:1px solid red; width:200px; padding:20px;">

    T

    <span style="background-color:#C0C0C0; position:relative;">

        这段文字从左向右排列，红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。

         可以通过它们绝对定位的位置来判断它们包含块的边缘。

        <em style="position:absolute; color:red; top:0; left:0;">XX</em>

        <em style="position:absolute; color:yellow; top:20px; left:0;">XX</em>

        <em style="position:absolute; color:blue; bottom:0; right:0;">XX</em>

    </span>

</p>

<p style="border:1px solid red; width:200px; padding:20px;">

     TEXT TEXT TEXT

     <span style="background-color:#C0C0C0; position:relative;">

         这段文字从左向右排列，红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。

         可以通过它们绝对定位的位置来判断它们包含块的边缘。

         <em style="position:absolute; color:red; top:0; left:0;">XX</em>

         <em style="position:absolute; color:yellow; top:20px; left:0;">XX</em>

         <em style="position:absolute; color:blue; bottom:0; right:0;">XX</em>

     </span>

</p>

<p style="border:1px solid red; width:200px; padding:20px; direction:rtl;">

    T

    <span style="background-color:#C0C0C0; position:relative;">

        这段文字从右向左排列，红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。

        可以通过它们绝对定位的位置来判断它们……

        <em style="position:absolute; color:red; top:0; left:0;">XX</em>

        <em style="position:absolute; color:yellow; top:20px; left:0;">XX</em>

        <em style="position:absolute; color:blue; bottom:0; right:0;">XX</em>

    </span>

</p>

<p style="border:1px solid red; width:200px; padding:20px; direction:rtl;">

    TEXT TEXT TEXT<span style="background-color:#C0C0C0; position:relative;">

    这段文字从右向左排列，红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。

    可以通过它们绝对定位的位置来判断它们……

    <em style="position:absolute; color:red; top:0; left:0;">XX</em>

    <em style="position:absolute; color:yellow; top:20px; left:0;">XX</em>

    <em style="position:absolute; color:blue; bottom:0; right:0;">XX</em> </span>

</p>

<div id="container" style="padding:50px; background-color:#c0c0c0; position:relative; width:200px; height:200px;">

    <div id="div1" style="width:100%; height:100%; border:2px solid blue;">

    <div id="content" style="border:1px solid red; position:absolute; left:0; top:0;">absolute element</div>

</div>

</div>

</body>

</html>

　　相关资料：

　　 CSS包含块containing block详解

　　 css2-bfc模型和ifc模型

　　 由position属性引申的关于css的进阶讨论（包含块、BFC、margin collapse）

　　前端精选文摘：BFC 神奇背后的原理

　　 BFC 、IFC

坑爹的BFC;块格式上下文的更多相关文章

  1. CSS外边距合并&块格式上下文

    前言问题Margin Collapsing 外边距合并Block Formatting Context 块格式化上下文解决方案参考 前言 之前在前端开发的过程中,都没有遇到外边距合并的问题(其实是因为 ...

  2. 前端面试题-BFC(块格式化上下文)

    一.BFC 的概念 1.规范解释 块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元 ...

  3. BFC块级格式上下文介绍

    块级格式上下文(Block formatting context) 什么是BFC? 块格式化上下文(block formatting context) 是页面 CSS视觉渲染的一部分.它是用于决定块盒 ...

  4. 学习块格式化上下文（BlockFormattingContext）

    什么是BFC BFC全称是Block Formatting Context,即块格式化上下文.它是CSS2.1规范定义的,关于CSS渲染定位的一个概念.要明白BFC到底是什么,首先来看看什么是视觉格式 ...

  5. [转]学习块格式化上下文（BlockFormattingContext）

    原文:https://www.cnblogs.com/elcarim5efil/p/4745796.html   格式化上下文 格式化上下文( formatting contexts )├── 块级格 ...

  6. BFC块级格式上下文

    BFC块级格式上下文,独立的一个渲染区域 1.同一个BFC的两个相邻盒子间的margin会重叠(垂直方向): 2.BFC内部的盒子在垂直方向上会一个接一个的放置: 3.每个子元素的左外边距与包含块的左 ...

  7. 什么是BFC（块级格式上下文）？

    ㈠什么是BFC? BFC 全称为 块格式化上下文 (Block Formatting Context) . 定义:浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, ta ...

  8. 理解 CSS 布局和块级格式上下文

    前言 BFC 的概念始于 CSS2,是个蛮古老的 CSS 话题了,网上也到处能搜到 BFC 的介绍,但是都不够简洁.本文系翻译自 Rachel Andrew 女士的博文 Understanding C ...

  9. BFC块级格式

    BFC块级格式上下文,独立的一个渲染区域 1.同一个BFC的两个相邻盒子间的margin会重叠(垂直方向): 2.BFC内部的盒子在垂直方向上会一个接一个的放置: 3.每个子元素的左外边距与包含块的左 ...

随机推荐

  1. 边工作边刷题：70天一遍leetcode: day 84-2

    要点:这题是combination的应用,从左向右想比从右向左容易. 因为有结果从小到大的要求,暗示用combintion而不是permutation 其实就是从小到大验证因子,每个因子和其对称因子立 ...

  2. HDU 4082 Hou Yi's secret --枚举

    题意: 给n个点,问最多有多少个相似三角形(三个角对应相等). 解法: O(n^3)枚举点,形成三角形,然后记录三个角,最后按三个角度依次排个序,算一下最多有多少个连续相等的三元组就可以了. 注意:在 ...

  3. Volley（五）—— 自定义Request

    详细解读Volley(四)—— 自定义Request Volley中提供了几个Request,如果我们有特殊的需求,完全可以自定义Request的,自定义Request自然要继承Request,那么本 ...

  4. Python-装饰器详解

    初学python,装饰器是什么玩意儿? 1:装饰器是函数,只不过该函数可以具有特殊的含义,装饰器用来装饰函数或类,使用装饰器可以在函数执行前和执行后添加相应操作. 2:至少两层函数 方式一: 理解方式 ...

  5. CSS3实现10种Loading效果

    昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… 第1种效果: 代码如下: <div class="loading"> ...

  6. Maven 的 HelloWorld

    <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...

  7. C语言 二级指针内存模型③

    //二级指针内存模型③ #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> #incl ...

  8. OAF与XML Publisher集成(转)

    原文地址:OAF与XML Publisher集成 有两种方式,一种是用VO与XML Publisher集成,另一种是用PL/SQL与XML Publisher集成 用VO与XML Publisher集 ...

  9. 泛型委托 Predicate/Func/Action

    Predicate 泛型委托  表示定义一组条件并确定指定对象是否符合这些条件的方法.此委托由 Array 和 List 类的几种方法使用,用于在集合中搜索元素.看看下面它的定义: // Summar ...

  10. 解决网站在负载均衡环境下SESSION丢失的问题

    在WEB场中,动态网页往往会因为几台主机做了负载而产生SESSION丢失的问题,网上也有很多的介绍,我这里只将我经历的过程给大家分享一下:   系统要运行在负载平衡的 Web 场环境中,而系统配置文件 ...