CSS的BFC

　BFC 即块级格式上下文（Block Formatting Context），它是指一个独立的块级渲染区域，只有block-level的box参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

BFC的生成

　CSS2.1规定满足一下条件之一就会生成BFC：

  1. 根元素
  2. float的值不为none
  3. overflow的值不为visible
  4. position的值为fixed或absolute
  5. display的值为table-cell / table-caption / inline-block / flex / inline-flex

BFC的布局规则

　上面说了，生成BFC的区域会有一套渲染规则来约束块级盒子内的布局；这些约束规则如下：

  1. 内部的块级元素会在垂直方向，一个接一个地放置
  2. 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
  3. 块级元素垂直方向的距离由margin决定。属于同一个BFC的两个相邻的块级元素会发生margin合并，不属于同一个BFC的两个相邻的块级元素不会发生margin合并；
  4. BFC的区域不会与float的元素区域重叠
  5. 计算BFC的高度时，浮动子元素也参与计算
  6. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；外面的元素也不会影响到容器里面的子元素

说了一通BFC的触发条件和布局规则，初次接触的可能很不容易理解；下面用这些BFC布局规则来举例几个常见的css规则和技巧就很容易明白了~


- 第一点与第二点很好理解，就不举例子细述了。

  • 外边距合并是个很常见的问题，即 在垂直方向上的两个相邻块级元素，它们的相邻一侧的外边距会发生合并（重叠），最终它们俩的间距等于较大的那个外边距：
<head>

  <style>

    .bro1{

      width:300px;

      height:200px;

      background:#ddd;

      margin-bottom:30px;

    }

    .bro2{

      width:200px;

      height:100px;

      background:pink;

      margin-top:20px;

    }

  </style>

</head>

<body>

  <div class='bro1'></div>

  <div class='bro2'> </div>

</body>

　依据第三点规则：位于同一BFC内的块级元素会发生外边距合并；那么，要解决这个问题，让原先这两个相邻的两个元素不在同一BFC内就可以了。 为其中一个块创建新的BFC：

<head>

  <style>

    .bro1{

      width:300px;

      height:200px;

      background:#ddd;

      margin-bottom:30px;

    }

    .bro2{

      width:200px;

      height:100px;

      background:pink;

      margin-top:20px;

    }

    .special{

      overflow:auto;

    }

  </style>

</head>

<body>

  <div class='special'>

    <div class='bro1'></div>

  </div>

  <div class='bro2'> </div>

</body>

效果：

  • 第四点：BFC的区域不会与float的元素区域重叠。 就算是初学浮动 应该也知道当元素浮动时会脱离文档流，向一边流动直到它的边缘碰到包含框的边缘；因为不在文档流中所以不占空间，在浮动时可以覆盖住别的元素：



    　利用第四点的约束规则，可以让没有浮动但又不想被覆盖的元素触发BFC，就不会给float的元素覆盖住了。

这个规则还可以作为多栏布局的一种实现方式。

<body>

  <div id="main">

		<div class="left"></div>

		<div class="right"></div>

		<div class="center"></div>

	</div>

</body>

左右两栏宽度固定，中间栏可以根据浏览器宽度自适应:

  • 包含浮动子元素：因为浮动元素脱离文档流，所以父元素的高度是只会由包含的非浮动元素决定。特别是如果父元素中所有的子元素都进行了浮动，那么这个父元素的高度将会为0。

    　而要想让父元素包含住浮动元素，就只要让父元素触发BFC就能利用到上面的第六条规则：计算BFC的高度时，浮动子元素也参与计算。　这就是时常用的一个技巧“用overflow:hidden/auto清除包含块内子元素的浮动”的原理。

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的理解

       1.什么是BFC 其实在老师让我们写这篇叫BFC的时候,我跟本不知道有什么BFC的东西. 后来,我找了一些资料,知道了,BFC是Block Formatting Context (块级格式化上下 ...

  4. CSS中的BFC

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

  5. CSS中的BFC详解

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

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

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

  7. CSS 中的 BFC,IFC,GFC和FFC

    原文网址:http://www.cnblogs.com/dingyufenglian/p/4845477.html What‘s FC? 一定不是KFC,FC的全称是:Formatting Conte ...

  8. CSS中z-index全解析

    一.z-index解释 z-index属性决定了一个HTML元素的层叠级别,元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言.一个更高的z-index值意味着这个元素在叠层顺序中会更靠近 ...

  9. CSS 中z-index全解析（摘自阿里西西）

    z-index全解析 Z-index属性决定了一个HTML元素的层叠级别.元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言.一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶 ...

随机推荐

  1. FCC 基础JavaScript 练习7

    1. Math.random()用来生成一个在0(包括0)到1(不包括1)之间的随机小数,因此Math.random()可能返回0但绝不会返回1. 提示随后的函数都会在return执行前调用,所以我们 ...

  2. 解决opencv在pycharm中无代码自动提示的bug

    2018-03-0422:19:39 首先,估计这不是bug 可能是我自己误操作导致的,但是让我搞了好久才搞定,实在是苦恼 如图已实现功能,百度里有很多朋友出现了,这个无代码提示的问题 大概是这样的, ...

  3. opencv3.31+vs2015终于配置成功了

    风萧萧兮易水寒, 熬了几个夜晚,终于把opencv配好了, 来图一 唉试了很多方法,终于成功. 教程和资料会发在个人网站里. 测试 代码 #include <iostream> #incl ...

  4. Python多线程爬图&Scrapy框架爬图

    一.背景 对于日常Python爬虫由于效率问题,本次测试使用多线程和Scrapy框架来实现抓取斗图啦表情.由于IO操作不使用CPU,对于IO密集(磁盘IO/网络IO/人机交互IO)型适合用多线程,对于 ...

  5. WebView浅谈

    课程Demo public class MainActivity extends Activity { private String url = "http://baidu.com/&quo ...

  6. 第五届蓝桥杯校内选拔第七题_(树型dp)

    G将军有一支训练有素的军队,这个军队除开G将军外,每名士兵都有一个直接上级(可能是其他士兵,也可能是G将军).现在G将军将接受一个特别的任务,需要派遣一部分士兵(至少一个)组成一个敢死队,为了增加敢死 ...

  7. 安卓app测试之流量监控

    一.查看PID 通过ps命令查看:ps | grep packageName 案例:adb shell "ps | grep tv.danmaku.bili" adb shell ...

  8. day20-面向对象基础

    目录 面向对象基础 面向过程编程与面向对象编程 面向过程编程 面向对象编程 类与对象 类 对象 定义类和对象 定制对象独有特征 对象属性查找顺序 类与对象的绑定方法 类与数据类型 对象的高度整合 面向 ...

  9. CAD把自定义实体，变成普通实体（com接口VB语言）

    主要用到函数说明: MxDrawXCustomEvent::MxDrawXCustomEntity::explode 把自定义实体,变成普通实体,详细说明如下: 参数 说明 LONGLONG lEnt ...

  10. 无插件纯Web HTML5 3D机房 进阶篇（新增设备、线缆、巡查等功能）

    前情提要 前阵子写了一篇无插件纯Web 3D机房,介绍了如何用html5在网页上创建无插件的精美3d机房场景.这两个月以来,陆续收到很多朋友的鼓(膝)励(盖),受宠若惊之余,对索要源代码的朋友都已经尽 ...