浅析CSS里的 BFC 和 IFC
前端必备图书《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;
} 效果图是： 
所以要想改变效果，使其互补干扰，就得利用规则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的更多相关文章
- 浅析CSS中的BFC和IFC
1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...
- CSS布局之BFC和IFC
本文为原创,转载请注明出处: cnzt 文章:cnzt-p http://www.cnblogs.com/zt-blog/p/6708358.html <这是一篇css2-3的布局规 ...
- Css里的BFC
一.BFC简介 BFC全称:Block Formatting Contexts (BFC,块级格式化上下文),就是 一个块级元素 的渲染显示规则 (可以把 BFC 理解为一个封闭的大箱子,,容器里面的 ...
- CSS之BFC、IFC、FFC and GFC
CSS之BFC.IFC.FFC and GFC 什么是FC? BFC(Block Formatting Contexts) BFC的布局规则: 如何生成BFC: IFC(Inline Formatti ...
- css布局的各种FC简单介绍：BFC，IFC，GFC，FFC
什么是FC? Formatting Context,格式化上下文,指页面中一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用. BFC 什么是BFC Block ...
- BFC？来自CSS中的BFC
浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子 ...
- 初识 BFC、 IFC、GFC、FFC
首先本文中介绍的 BFC. IFC.GFC.FFC 均为 CSS 中常见问题的解读,如没兴趣,可以绕道了. 然后在介绍这么多的 *FC 之前,我们得了解 一下 Box 和 Formatting Con ...
- 你知道BFC、IFC、FFC、GFC及多栏自适应布局吗？
FC(Formatting Context)格式化内容,常见的FC有BFC.IFC.FFC.GFC四种类型,BFC和IFC是W3C CSS2.1规范提出的概念,FFC和GFC是W3C CSS3规范提出 ...
- 重拾 BFC、IFC、GFC、FFC
温故知新,巩固基础 从 FC 开始 FC,Formatting Context,格式化上下文,是 W3C CSS2.1 规范中的一个概念,定义的是页面中一块渲染区域,并且有一套渲染规则,它决定了其子元 ...
随机推荐
- linux配置邮箱服务
配置邮箱服务Linux常见的邮箱客户端是mail或mutt:服务端有sendmail服务(centos 5).postfix服务(centos 6).这里我们不使用本地的邮件服务,而是使用本地的邮件客 ...
- win7旗舰版64位java的jdk环境变量的配置（2012-12-26-bd 写的日志迁移
首先到oracle的官方网站http://www.oracle.com/technetwork/cn/java/javase/downloads/index.html下个JDK比如下图: 必须是win ...
- Python中关于集合的介绍及用法
一.集合的含义及创建方法 集合(set)是一种无序的并且里面存放不同元素的序列. 集合可以使用大括号 { } 或者 set() 函数创建集合,注意:创建一个空集合必须用 set() 而不是 { },因 ...
- UVA 10859 Placing Lamppost 树形DP+二目标最优解的求解方案
题意:给定一个无向,无环,无多重边,要求找出最少的若干点,使得,每条边之中至少有一个点上有街灯.在满足上述条件的时候将还需要满足让两个点被选择的边的数量尽量多. 题解: 对于如何求解最小的节点数目这点 ...
- Intellij Idea 创建JavaWeb项目
折腾Tomcat折腾了两个晚上,第一个晚上怎么都进不了Tomcat的首页,第二个晚上进去了,但是新建的Web项目,在浏览器中运行,总是 Error on Apache Tomcat: The requ ...
- SpringCloud 微服务一：spring boot 基础项目搭建
spring cloud是建立在spring boot的基础上的,而之前虽然听说过,也随便看了一下spring boot,却没有真正使用,因此还必须先花时间学一下spring boot. spring ...
- proguaid 混淆代码
注意:这里有一个坑.就是-ignorewarnings 他老是混淆不了,告诉你不行.其实加上这句话,就可以了. 下面贴一下代码: -injars c:/ceb_lib.jar -outjars c:/ ...
- TCP/IP网络编程之多种I/O函数
send和recv函数 在之前的学习中,我们在不少示例中用到send和recv这两个函数,但一直没有详细解释过着两个函数中每个参数的含义.本节将介绍Linux平台下的send&recv函数 # ...
- 01-Flutter移动电商实战-项目学习记录
一直想系统性的学习一下 Flutter,正好看到该课程<Flutter移动电商实战>的百度云资源,共 69 课时,由于怕自己坚持不下去(经常学着学着就不学了),故采用博客监督以记之. 1. ...
- Apache Compress-使用
Apache Compress 是什么? Apache 提供的文件压缩工具. 运行环境 jdk 1.7 commons-compress 1.15 测试代码 package com.m.basic; ...