What:了解该知识点的概念，本质以及有关牵扯到的相关知识概念

BFC这个东西说常见的话你可能不觉得，但是你肯定会常用，也许你在用的时候也没想到BFC这东西。网上也有很多写这些东西的文章，但是自己写一遍印象更深一点。

首先我们看看w3c对BFC是怎么定义的:

http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the ‘margin’ properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box’s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

用谷歌翻译(笑..我是谷歌脑残粉)过来就是：

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的块级格式化上下文。

在一个块级格式化上下文里，盒子从包含块的顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。两个相邻的块级盒子的垂直外边距会发生叠加。

在块级格式化上下文中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘），即使存在浮动也是如此，除非这个盒子创建一个新的块级格式化上下文。

从上面我们还可找出几个几个比较重要的概念东西，比如:boxe , block formatting context。毫无疑问BFC就是block formatting context的缩写，中文就是“块级格式化上下文”的意思。我们在那个w3c那个页面发现还有其他inline formatting context，所以我们可以看看 formatting context是个什么东西：

Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

最常见的Formatting context有Block fomatting context(简称BFC)和Inline formatting context(简称IFC)。CSS2.1 中只有BFC和IFC, CSS3中还增加了GFC和FFC.

至于那个box还要讲吗？嗯，还是回顾一下：

Box是CSS布局的对象和基本单位， 直观点来说，就是一个页面是由很多个Box(即boxes)组成的。元素的类型和display属性，决定了这个Box的类型。 不同类型的Box， 会参与不同的Formatting context(一个决定如何渲染文档的容器)，因此Box内的元素会以不同的方式渲染。常见的盒子类型

block-level box: display属性为block, list-item, table的元素，会生成block-level box。并且参与block fomatting context。 inline-level box: display属性为inline, inline-block, inline-table的元素，会生成inline-level box。并且参与inline formatting context。 妈蛋四级刚刚飘过的孩子看这点英文不容易啊，有时候我们总觉的书上或者官方的概念定义的东西不利于我们理解，所以我们更喜欢有些老师通俗的讲解。这里我们也通俗的理解一下：

BFC就是“块级格式化上下文”的意思，创建了 BFC的元素就是一个独立的盒子，不过只有Block-level box可以参与创建BFC， 它规定了内部的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的高度时，浮动元素也参与计算。

好了What这一阶段就到这了，基本的概念我们都要了解清楚，不清楚的多看几遍，是在不清楚的我猜是我写的不够通俗易解。

接下来我一般会考虑Why，即为什么会出现这个问题，为什么要这样用，为什么会出现这些效果。但是这里就不写了，因为我也不知道写啥(哭…求高手指点)…

到最后我就是考虑How了，不用说你也知道了，就是怎么解决这些问题，这些知识点该怎么用，还有没有其他的方法..

那么我们该怎么使用BFC呢，如何触发BFC呢？：

  1. float 除了none以外的值
  2. overflow 除了visible 以外的值（hidden，auto，scroll ）
  3. display (table-cell，table-caption，inline-block, flex, inline-flex)
  4. position值为（absolute，fixed）
  5. fieldset元素

在以上的情况里可以创建BFC。

接下我们看下怎么运用BFC，在哪些场景可以用到BFC.

1.解决margin叠加问题

三P每个p之间的距离为50px，发生了外边距叠加。

<style>
p{
    color:black;
    background:#F00;
    line-height:100px;
    width:200px;
    text-align:center;
    margin:50px;
}
     </style>
    <body>
<p>
    hello world
</p>
<p>
    hello world
</p>
<p>
    hello world
</p>
    </body>

要解决这个叠加问题即让每个P之间是100px，我们可以新建一个BFC，怎么建呢？可以给p元素添加一个父元素，让它触发BFC。如下:

<style>
    .BFC{
    overflow:hidden;
}
p{
    color:black;
    background:#F00;
    line-height:100px;
    width:200px;
    text-align:center;
    margin:50px;
}
   
     </style>
    </head>
    <body>
    <div class="BFC">
    <p>
    hello world
    </p>
</div>
 
<p>
    hello world
</p>
<p>
    hello world
</p>
    </body>

2.用于布局

从图中我们会发现上面BFC的第三个特性，就是元素的左外边距会触碰到包含块容器的做外边框，就算存在浮动也会如此。

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

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

body {

        width: 300px;

        position: relative;

    }

.aside {

        width: 100px;

        height: 150px;

        float: left;

        background: blue;

}

 .main {

        height: 200px;

                background: #f00;

}

那么我们如何解决这个问题呢？看上面BFC第四个特性，就是BFC不会与浮动盒子叠加，那么我们是不是可以创建一个新的BFC来解决这个问题呢？

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

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

body { width: 300px;position: relative; }

.aside { width: 100px; height: 150px; float: left; background: blue; }

.main { height: 200px; background: #f00; overflow:hidden; }

来看看：

发现我们用overflow:hidden触发main元素的BFC之后，效果立马出现了,一个两栏布局就这么妥妥的搞掂…

3.用于清除浮动，计算BFC高度.

因为上面第六个特性提到计算BFC高度时，浮动元素也会参与计算，我们先看一个例子：

<div class="BFC">

    <div class="box"></div>

    <div class="box"></div>

</div

.BFC {

        border: 5px solid #f00;

        width: 300px;

    }

    .box {

        border: 5px solid blue;

        width:100px;

        height: 100px;

        float: left;

    }

我们发现由于里面两个子元素浮动的关系，两个box已经脱离了父元素的包含块，父元素高度已经塌陷，我们需要让父元素包含两个box子元素，这样计 算高度时，两个浮动子元素就会参与，所以我们要闭合浮动，触发父元素的BFC，我们还是继续用overflow:hidden来看看效果吧：

<div class="BFC">

    <div class="box">

    </div>

    <div class="box">

    </div>

</div>
.BFC {

        border: 5px solid #f00;

        width: 300px;

          overflow:hidden;

    }

    .box {

        border: 5px solid blue;

        width:100px;

        height: 100px;

        float: left;

    }

怎么样，效果还很明显的吗，当然清理(闭合)浮动还有很多方法，大家可以看看一丝大神写的那些年我们一起清除过的浮动。 好了写到这里基本才不多了，BFC是个很奇怪的东西，她一直隐式的存在我们的css样式里，但是我们要记住BFC是页面元素里一个独立存在作用块，它不影响它外面的布局，外面的元素也不会影响到BFC里面的布局。

参考文章：http://www.w3.org/TR/CSS2/visuren.html#block-formatting http://www.iyunlu.com/view/css-xhtml/55.html，http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html

From：http://dyy.im

http://www.html-js.com/article/1866

CSS之BFC详解的更多相关文章

  1. [转]CSS hack大全&详解

    转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...

  2. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  3. [转]CSS vertical-align属性详解 作者：黄映焜

      CSS vertical-align属性详解 posted @ 2014-08-26 17:44 黄映焜   前言:关于vertical-align属性. 实践出真知. 垂直居中. 第二种用法. ...

  4. CSS绝对定位absolute详解

    转:https://www.jianshu.com/p/a3da5e27d22b     之前介绍过CSS浮动float详解,本篇介绍的绝对定位absolute和浮动float有部分相似性.如果能理解 ...

  5. css 浮动问题详解

    浮动(float),一个我们即爱又恨的属性.爱,因为通过浮动,我们能很方便地布局: 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器). ...

  6. css文本格式详解

    一.css文本主体内容: 二.css文本详解:  1.文本缩进 语法: text-indent:<length>|<percentage> 默认值为0. 属性值详解: < ...

  7. CSS transition 过渡 详解

    transition 过渡 IE10.Firefox.Chrome.Opera 支持 transition 属性. Safari 需要前缀 -webkit-. Chrome 25 以及更早版本需要前缀 ...

  8. css学习--inline-block详解及dispaly:inline inline-block block 三者区别精要概括

    *知识储备: 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行. 块级元素:是可以控制宽和高.margin等,并且会换行. 1.inline-block 详解 (1)一句话就是在 ...

  9. CSS中position详解与常见应用实现

    在web前台开发时候,我们必不可少的会用到postion属性进行布局定位.今天总结了一下position知识点,与常用功能与大家分享,欢迎大家交流指正. 首先我们对postion属性进行详解. 在CS ...

随机推荐

  1. HDU - 1800 Flying to the Mars 【贪心】

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1800 题意 给出N个人的 level 然后 高的level 的 人 是可以携带 比他低level 的人 ...

  2. Python程序打包成exe的一些坑

    今天写了一个项目,Python项目,需要在win7上跑起来,我想,这不是简单的不行么,直接上Pyinstaller不就完了? 但是后来,我发觉我真是too young too simple. 为什么这 ...

  3. 简介windows的环境变量

    环境变量一般是指在操作系统中用来指定操作系统运行环境的一些参数,比如临时文件夹位置和系统文件夹位置等.这点有点类似于DOS时期的默认路径,当你运行某些程序时除了在当前文件夹中寻找外,还会到设置的默认路 ...

  4. Thread.currentThread().getContextClassLoader() and Class.getClassLoader()

    Thread.currentThread().getContextClassLoader() and Class.getClassLoader()   一.同一工程中: String path = T ...

  5. web前端框架之自定义form表单验证

    自定义form验证初试 .在后端创建一个类MainForm,并且在类中自定义host ip port phone等,然后写入方法,在post方法中创建MainForm对象,并且把post方法中的sel ...

  6. dbgrid,datasoure,ClientDataSet的简单应用

    dbgrid是用来在界面上显示数据的,需要连接源dbgrid1.datasource := datasource1; datasource:作为dbgrid,clientDataset的连接桥梁,需要 ...

  7. centos 中 增强web服务器安全

    一.修改ssh连接的默认端口: 1.1 用root 连接进入系统: 1.2 修改ssh的配置文件 #vi /etc/ssh/sshd_config 在13行找到#Port 22 (默认端口22) 1. ...

  8. Delphi中 为DBNavigator的按钮加中文

    Delphi中 为DBNavigator的按钮加中文 /*Delphi中数据库控件DBNavigator使用起来不错,但是按钮上“+”.“-”等含义对于中国的用户不习惯,甚至不知道是什么含义.改成相应 ...

  9. 【转】Struts2的线程安全 和Struts2中的设计模式----ThreadLocal模式

    [转]Struts2的线程安全 和Struts2中的设计模式----ThreadLocal模式 博客分类: 企业应用面临的问题 java并发编程 Struts2的线程安全ThreadLocal模式St ...

  10. linux 交换分区 swap

    linux swap分区用来保证内存过载时也可以使用,是在磁盘级别对内存的一次扩展,swap分区必须是一个单独的分区 创建过程: 1.用fdisk 命令新建分区,在创建过程中通过L命令和t命令来调整分 ...