CSS中的BFC解析

CSS的BFC

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

BFC的生成

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

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

BFC的布局规则

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

内部的块级元素会在垂直方向，一个接一个地放置
每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
块级元素垂直方向的距离由margin决定。属于同一个BFC的两个相邻的块级元素会发生margin合并，不属于同一个BFC的两个相邻的块级元素不会发生margin合并；
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
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解析的更多相关文章

浅析CSS中的BFC和IFC
1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...
BFC？来自CSS中的BFC
浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子 ...
我对CSS中的BFC的理解
1.什么是BFC 其实在老师让我们写这篇叫BFC的时候,我跟本不知道有什么BFC的东西. 后来,我找了一些资料,知道了,BFC是Block Formatting Context (块级格式化上下 ...
CSS中的BFC
CSS当中BFC介绍在前端当中,我们都知道标准文档流,我们在开发的时候,经常会碰到block和inline.而下文要说到的BFC就是对块级盒子的格式化.当然block级别的盒子是BFC,那么inli ...
CSS中的BFC详解
引言: 这篇文章是我对BFC的理解及总结,带你揭开BFC的面纱.你将会知道BFC是什么,形成BFC的条件,BFC的相关特性,以及他的实际应用. 一.何为BFC BFC(Block Formatting ...
理解CSS中的BFC(块级可视化上下文)[译]
开篇一些元素,如float元素,如position为absolute,inline-block,table-cell或table-caption的元素,以及overflow属性不为visible的元 ...
CSS 中的 BFC,IFC,GFC和FFC
原文网址:http://www.cnblogs.com/dingyufenglian/p/4845477.html What‘s FC? 一定不是KFC,FC的全称是:Formatting Conte ...
CSS中z-index全解析
一.z-index解释 z-index属性决定了一个HTML元素的层叠级别,元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言.一个更高的z-index值意味着这个元素在叠层顺序中会更靠近 ...
CSS 中z-index全解析（摘自阿里西西）
z-index全解析 Z-index属性决定了一个HTML元素的层叠级别.元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言.一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶 ...

随机推荐

leetcode650 2 Keys Keyboard
思路: 把给定的数分解质因子之后,对于每一个质因子x,都需要x次操作(一次copy all操作和x-1次paste),所以答案就是对分解后的所有质因子求和. 实现: class Solution { ...
Android OKHttp网络框架
好久没逛简书了.这周公司的项目也已经愉快的迭代了新版本,对于之前一直存留的东西一直没怎么梳理,今天想说说这两年特别火的网络框架.okhttp我想大部分Android开发者都不陌生,因为它的到来.是我们 ...
PSP辅助软件开发计划
PSP辅助软件开发计划作者: 日期:2013年11月14号 1开发目的鉴于软件开发过程中,程序员往往无法在规定时间内完成任务,而且无法给出拖延的时间从而造成项目进度计划不准确.开发此软件帮助程序员 ...
用rownum先排序后分页
今天突然想到rownum可以解决分页问题,于是做了各种实验,找个几个文章,最后有了一定成果. 现有表tablename,含有字段showorder,要求提取showorder的第11行到20行数据. ...
（转）淘淘商城系列——Redis五种数据类型介绍
http://blog.csdn.net/yerenyuan_pku/article/details/72855562 Redis支持五种数据类型:string(字符串),hash(哈希),list( ...
LeetCode第63题--不同路径
一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为“Start” ).机器人每次只能向下或者向右移动一步.机器人试图达到网格的右下角(在下图中标记为“Finish”).现在考虑网格中 ...
re模块，正则表达式
re模块作用:取文本或者字符串内你所需要的东西正则表达式的大致匹配过程是:依次拿出表达式和文本中的字符比较,如果每一个字符都能匹配,则匹配成功:一旦有匹配不成功的字符则匹配失败. ^叫做元字符,元 ...
更新dell机器的idrac的固件版本后重启机器系统失败
事情是这样的.dell ra620机器,idrac7打不开java,所以在机器生产中直接更新了固件,客户直接在系统内reboot后就连不上.打开本地是卡在下图. 强制重启后发现服务器提示,是IDRAC ...
ExtJs如何判断form表单是否被修改过详解
1.Extjs表单提交主要有三种方式: 1, EXT的form表单ajax提交(默认提交方式) 相对单独的ajax提交来说优点在于能省略写参数数组 ,form.getForm().submi ...
ZOJ - 3987 - Numbers （大数 + 贪心）
参考自:https://blog.csdn.net/u013534123/article/details/78484494 题意: 给出两个数字n,m,把n分成m份,使得以下最小思路: 或运算只有0 ...