1.什么是BFC

其实在老师让我们写这篇叫BFC的时候，我跟本不知道有什么BFC的东西。

后来，我找了一些资料，知道了，BFC是Block Formatting Context （块级格式化上下文）的缩写，它是W3C CSS 2.1 规范中的一个概念，是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

2.什么情况下会创建BFC

CSS规范说明了在下列这些情况下会创建新的block formatting context：

浮动元素（float: left | right）；

绝对定位元素（position: absolute | fixed）；

行内块元素（display: inline-block）；

表格的单元格（display: table-cells，TD、TH）；

表格的标题（display: table-captions，CAPTION）；

'overflow' 特性不为visible 的元素（除非该值已经传播到viewport?）；

表格元素创建的"匿名框"

注意，"display:table" 本身并不产生"block formatting contexts"。但是，它可以产生匿名框，其中包含"display:table-cell" 的框会产生块格式化上下文。总之，对于"display:table" 的元素，产生块格式化上下文的是匿名框而不是"display:table" 。

注意，是这些元素创建了块格式化上下文，它们本身不是块格式化上下。

3.BFC布局规则：

  • 内部的Box会在垂直方向，一个接一个地放置。
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  • 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
  • BFC的区域不会与float box重叠。
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  • 计算BFC的高度时，浮动元素也参与计算

 4.BFC的主要作用及原理

1.自适应两栏式

代码：

页面效果如下：

这个图就像上面的布局规则第3条（每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。）所说一样，虽然存在浮动的元素mydiv1，但mydiv2的左边依然会与包含块的左边相接触,而根据布局规则第4条（BFC的区域不会与float box重叠）所说，我们可以通过通过触发mydiv2生成BFC， 来实现自适应两栏布局:

而当我们添加了（overflow:hidden）后，我们就通过触发mydiv2来生成了一个BFC，而BFC生成后页面效果如图：

注意：这个新的BFC不会与浮动的mydiv1重叠。因此会根据包含块的宽度，和mydiv1的宽度，自动变窄

2.清除浮动

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" content="text/html">

    <title></title>

    <style type="text/css">

        .mydiv1{

            width: 100px;

            height: 150px;

            float: left;

            background: #f66;

            margin-left: 10px;

        }

        .mydiv2{

            width: 100px;

            height: 150px;

            background: #fcc;

            float: left;

            margin-left: 10px;

        }

        .mydiv3{

            width: 100px;

            height: 150px;

            float: left;

            background-color: #ebcccc;

            margin-left: 10px;

        }

        .wdiv{

            border: 5px solid #9acd32;

            width: 100%;

        }

    </style>

</head>

<body>

    <div class="wdiv">

        <div class="mydiv1"></div>

        <div class="mydiv2"></div>

        <div class="mydiv3"></div>

    </div>

</body>

</html>

一般我们想下的是如下的情况：

可是现实效果呢？却是如下：

之所以会这样了，是因为父容器并没有把浮动的子元素包围起来，俗称塌陷

而我们要清除这种现像了，就要根据布局规则第6条（计算BFC的高度时，浮动元素也参与计算），我们可以触发wdiv来生成BFC，，那么wdiv在计算高度时，wdiv内部的浮动元素也会参与计算。代码如下：

效果也同上面第一张一样，效果如下：

总结

因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

 
 
 
 
 
 

我对CSS中的BFC的理解的更多相关文章

  1. 浅析CSS中的BFC和IFC

    1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...

  2. BFC？来自CSS中的BFC

    浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子 ...

  3. CSS中的BFC详解

    引言: 这篇文章是我对BFC的理解及总结,带你揭开BFC的面纱.你将会知道BFC是什么,形成BFC的条件,BFC的相关特性,以及他的实际应用. 一.何为BFC BFC(Block Formatting ...

  4. CSS中盒模型的理解

    今天突然看到一篇关于CSS中盒模型的文章,忽然觉得自己竟然遗忘了很多小的地方,所以写一篇文章来记忆一下 (摘抄于千与千寻写的CSS盒子模型理解,并在自己基础上添加了一些东西,希望更完善,对大家有帮助) ...

  5. CSS中box-sizing属性的理解与部分用法

    今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分 ...

  6. 理解CSS中的BFC(块级可视化上下文)[译]

    开篇 一些元素,如float元素,如position为absolute,inline-block,table-cell或table-caption的元素,以及overflow属性不为visible的元 ...

  7. CSS中的BFC解析

    CSS的BFC BFC 即块级格式上下文(Block Formatting Context),它是指一个独立的块级渲染区域,只有block-level的box参与,该区域拥有一套渲染规则来约束块级盒子 ...

  8. 对css中clear元素的理解

    clear:left;表示左侧不能有浮动元素. clear:right;表示右侧不能有浮动元素. clear:both;表示左右两侧都不能有浮动元素. 但在使用时,还得考虑css优先级问题.相同类型选 ...

  9. CSS中的BFC

    CSS当中BFC介绍 在前端当中,我们都知道标准文档流,我们在开发的时候,经常会碰到block和inline.而下文要说到的BFC就是对块级盒子的格式化.当然block级别的盒子是BFC,那么inli ...

随机推荐

  1. Cacti安装详细步骤（转）

    一.cacti概述 1. cacti是用php语言实现的一个软件,它的主要功能是用snmp服务获取数据,然后用rrdtool储存和更新数据,当用户需要查看数据的时候用rrdtool生成图表呈现给用户. ...

  2. Android 禁止屏幕休眠和锁屏的方法

    Introduction 常常我们开 发程序的时候我们不需要系统唤醒系统锁屏功能,比如我们在做xxxNowTV或XXX播放器这样的程序,用户有时候在看电视或视频的时候不希望系统的锁屏 功能启动,既不想 ...

  3. iptables原理详解以及功能说明

    原文:http://www.svipc.com/thread-450-1-1.html 前言   iptables其实就是Linux下的一个开源的信息过滤程序,包括地址转换和信息重定向等功能的,他由四 ...

  4. C/C++ strtok函数

    一.头文件:#include <string.h> 二.函数原型:char * strtok (char *str, const char * delimiters); 三.参数:str, ...

  5. Naive Bayes在mapreduce上的实现(转)

    Naive Bayes在mapreduce上的实现 原文地址 http://www.cnblogs.com/sunrye/p/4553732.html Naive Bayes是比较常用的分类器,因为思 ...

  6. cc2530串口通信流程

    //串口发送接收流程 main: //主函数 ->osal_init_system(); //操作系统初始化 ->osalInitTasks(); //任务初始化 -->ZDApp_ ...

  7. Apache下的FileUtils.listFiles方法简单使用技巧

    一.引言 Apache提供的很多工具方法非常好用,推荐. 今天在使用的过程中使用到了org.apache.commons.io.FileUtils.listFiles方法,本文主要谈谈这个工具方法的用 ...

  8. javascript类的继承

    1.构造函数方式写类,通过方法调用复制父类属性/字段到子类 实现继承 这里父类,子类都采用构造函数方式写,不用原型.子类调用父类函数来复制父类的属性. 1 2 3 4 5 6 7 8 9 10 11 ...

  9. nginx 红黑树详解

    1 介绍 这部分终于整理完了,太耗时间了,留下来备忘吧! 之前看STL源码时,只是研究了红黑树的插入部分.在stl源码剖析的书中,也没有涉及到删除操作的分析,这次对删除操作也进行了详细的研究, 并且还 ...

  10. C++------------typedef 函数指针类型定义

    摘要bycrazyhacking:        typedef 是定义了一种"函数指针"类型,可以再声明很多变量.函数指针的定义是定义了一个变量. int max(int x,i ...