浅析CSS里的 BFC 和 IFC

2018-01-29 阅读 1794 收藏 3 原链：segmentfault.com
分享到：

 

前端必备图书《Web安全开发指南 掌握白帽子的Web安全技能 从源头消除安全隐患 打造安全无虞的Web应用》 >> >> 

前言

之前一直听到有人提到 CSS里的BFC，正巧在 IFE的练习里遇到了外边距折叠的问题，所以正好弄清楚BFC的机制。 (参考来源 见文末的 Reference)

一 什么是 BFC

和之前所有博文一样，还是先从What的角度开始介绍，由浅入深的理解BFC。 所谓的 Formatting context(格式化上下文), 它是 W3C CSS2.1 规范中的一个概念。

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

而 Block Formatting Contexts (BFC，块级格式化上下文)，就是 一个块级元素 的渲染显示规则。通俗一点讲，可以把 BFC 理解为一个封闭的大箱子，，容器里面的子元素不会影响到外面的元素，反之也如此。

BFC的布局规则如下： 1 内部的盒子会在垂直方向，一个个地放置； 2 BFC是页面上的一个隔离的独立容器； 3 属于同一个BFC的 两个相邻Box的 上下margin会发生重叠 ； 4 计算BFC的高度时，浮动元素也参与计算 5 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此； 6 BFC的区域不会与float重叠；

那么如何触发 BFC呢？只要元素满足下面任一条件即可触发 BFC 特性：

  • body 根元素；
  • 浮动元素：float 不为none的属性值；
  • 绝对定位元素：position (absolute、fixed)
  • display为： inline-block、table-cells、flex
  • overflow 除了visible以外的值 (hidden、auto、scroll)

二 BFC的特性及应用

接下来介绍BFC常见的特性和应用，这一部分 在解释原因时，会用到上文的布局规则 和 触发条件，所以需要注意一下。

1 两个 相邻的普通流中的 块元素垂直方向上的 margin会折叠

<head>

.p {

  width:200px;

  height:50px;

  margin:50px 0;

  background-color:red;

}

</head>

<body>

   <div class="p"></div>

   <div class="p"></div>

</body>

效果图是：

根据BFC规则的第3条：

盒子垂直方向的距离由margin决定， 属于 同一个BFC的 + 两个相邻Box的 + 上下margin 会发生重叠。

上文的例子 之所以发生外边距折叠，是因为他们 同属于 body这个根元素， 所以我们需要让 它们 不属于同一个BFC，就能避免外边距折叠：

<div class="p"></div>  

<div class="wrap">

  <div class="p"></div>

</div>
.wrap {

  overflow:hidden;  

.p {

  width:200px;

  height:50px;

  margin:50px 0;

  background-color:red;

效果图是：

2 BFC可以包含浮动的元素（清除浮动）

正常情况下，浮动的元素会脱离普通文档流，所以下面的代码里：

<div style="border: 1px solid #000;">

    <div style="width: 50px; height: 50px; background: #eee;

               float: left;">

    </div>

</div>

外层的div会无法包含 内部浮动的div，效果见下图：

但如果我们 触发外部容器的BFC，根据BFC规范中的第4条：计算BFC的高度时，浮动元素也参与计算，那么外部div容器就可以包裹着浮动元素，所以只要把代码修改如下：

<div style="border: 1px solid #000;overflow: hidden">

    <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>

</div>

就可以完成以下效果：

3 BFC可以阻止元素被浮动元素覆盖

先看一个例子：

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

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

div {

  width:300px;

}

.aside {

  width: 100px;

  height: 150px;

  float: left;

  background: black;

}

.main {

  height:200px;

  background-color:red;

}

效果图是： 之所以是这样，是因为上文的 规则5： 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；

所以要想改变效果，使其互补干扰，就得利用规则6 ：BFC的区域不会与float重叠， 让 <div class="main"> 也能触发BFC的性质，即：

.main {

  overflow:hidden;

  height:200px;

  background-color:red;

}

通过这种方法，就能 用来实现 两列的自适应布局。

三 简要介绍IFC

IFC布局规则：

1 框会从包含块的顶部开始，一个接一个地水平摆放。

2 摆放这些框时，它们在水平方向的 内外边距+边框 所占用的空间都会被考虑； 在垂直方向上，这些框可能会以不同形式来对齐： 水平的margin、padding、border有效，垂直无效。不能指定宽高;

3 行框的宽度是 由包含块和存在的浮动来决定; 行框的高度 由行高来决定

四 Refernce：

浅析CSS里的 BFC 和 IFC的更多相关文章

  1. 浅析CSS中的BFC和IFC

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

  2. CSS布局之BFC和IFC

    本文为原创,转载请注明出处: cnzt       文章:cnzt-p http://www.cnblogs.com/zt-blog/p/6708358.html <这是一篇css2-3的布局规 ...

  3. Css里的BFC

    一.BFC简介 BFC全称:Block Formatting Contexts (BFC,块级格式化上下文),就是 一个块级元素 的渲染显示规则 (可以把 BFC 理解为一个封闭的大箱子,,容器里面的 ...

  4. CSS之BFC、IFC、FFC and GFC

    CSS之BFC.IFC.FFC and GFC 什么是FC? BFC(Block Formatting Contexts) BFC的布局规则: 如何生成BFC: IFC(Inline Formatti ...

  5. css布局的各种FC简单介绍：BFC，IFC，GFC，FFC

    什么是FC? Formatting Context,格式化上下文,指页面中一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用. BFC 什么是BFC Block ...

  6. BFC？来自CSS中的BFC

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

  7. 初识 BFC、 IFC、GFC、FFC

    首先本文中介绍的 BFC. IFC.GFC.FFC 均为 CSS 中常见问题的解读,如没兴趣,可以绕道了. 然后在介绍这么多的 *FC 之前,我们得了解 一下 Box 和 Formatting Con ...

  8. 你知道BFC、IFC、FFC、GFC及多栏自适应布局吗？

    FC(Formatting Context)格式化内容,常见的FC有BFC.IFC.FFC.GFC四种类型,BFC和IFC是W3C CSS2.1规范提出的概念,FFC和GFC是W3C CSS3规范提出 ...

  9. 重拾 BFC、IFC、GFC、FFC

    温故知新,巩固基础 从 FC 开始 FC,Formatting Context,格式化上下文,是 W3C CSS2.1 规范中的一个概念,定义的是页面中一块渲染区域,并且有一套渲染规则,它决定了其子元 ...

随机推荐

  1. Linux运维企业架构项目实战系列

    Linux运维企业架构项目实战系列 项目实战1—LNMP的搭建.nginx的ssl加密.权限控制的实现 项目实战2—LVS.nginx实现负载均衡系列2.1 项目实战2.1—实现基于LVS负载均衡集群 ...

  2. 无屏幕和键盘配置树莓派WiFi和SSH

    原文转载:http://shumeipai.nxez.com/2017/09/13/raspberry-pi-network-configuration-before-boot.html 不算是什么新 ...

  3. requests中文页面乱码解决方案【转】

    requests中文页面乱码解决方案!   请给作者点赞 --> 原文链接 Python中文乱码,是一个很大的坑,自己不知道在这里遇到多少问题了.还好通过自己不断的总结,现在遇到乱码的情况越来越 ...

  4. spark测试几个hadoop的典型例子

    1.求每年的最高温度数据格式如下: 0067011990999991950051507004888888889999999N9+00001+999999999999999999999900670119 ...

  5. kafka 的offset的重置

    最近在spark读取kafka消息时,每次读取都会从kafka最新的offset读取.但是如果数据丢失,如果在使用Kafka来分发消息,在数据处理的过程中可能会出现处理程序出异常或者是其它的错误,会造 ...

  6. CodeForces 781D Axel and Marston in Bitland DP

    题意: 有一个\(n\)个点\(m\)条边的无向图,边有两种类型,分别用\(0\)和\(1\)标识 因此图中的任意一条路径都对应一个\(01\)字符串 定义一个无限长的字符串\(s\): 开始令\(s ...

  7. ECMAScript5.1

    http://lzw.me/pages/ecmascript/  ECMAScript5.1中文版 https://msdn.microsoft.com/zh-cn/library/dn656907. ...

  8. 拼多多2018校招编程题汇总 Python实现

    题目原址 列表补全 在商城的某个位置有一个商品列表,该列表是由L1.L2两个子列表拼接而成.当用户浏览并翻页时,需要从列表L1.L2中获取商品进行展示.展示规则如下: 用户可以进行多次翻页,用offs ...

  9. DWR搭建以及使用教程

    DWR搭建以及使用教程   DWR(Direct Web Remoting)是一个Ajax的开源框架,用于改善web页面与Java类交互的远程服务器端的交互体验,可以帮助开发人员开发包含AJAX技术的 ...

  10. 商城商品购买数量增减的完美JS效果

    近期在开发一个地方O2O租书项目,使用ASP.NET MVC技术,其中在图书详情页,用户可以输入借阅的数量,这里使用了js来控制数量的增减和校验. 数量一定是数字 点击增减按钮的时候要能自动加1或减1 ...