重拾 BFC、IFC、GFC、FFC-白红宇

重拾 BFC、IFC、GFC、FFC

阅读量：4687 次

发布时间：2019-06-09

本文共 3332 字，大约阅读时间需要 11 分钟。

温故知新，巩固基础

从 FC 开始

FC，Formatting Context，格式化上下文，是 W3C CSS2.1 规范中的一个概念，定义的是页面中一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，及和其他元素的关系和相互作用。

常见的FC有：BFC(Block Formatting Context | 块级格式化上下文)和IFC(Inline Formatting Context | 行内格式化上下文)。

其次还有：GFC(GridLayout Formatting Context | 网格布局格式化上下文)、FFC(Flex Formatting Context | 自适应格式化上下文)。

参与者

一个页面由很多个盒子组成，在普通流中的盒子会参与一种格式化上下文，这个盒子可能是块盒也可能是行内盒，但不可能是块盒又是行内盒。元素的类型和display属性决定了这个盒子的类型，不同类型的盒子，会参与不同的格式化上下文，块级盒参与块级格式化上下文（BFC）,行内盒参与行级格式化上下文（IFC）。

BFC

布局规则

内部的盒子会在垂直方向，一个接一个地放置。

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

每个元素的左外边缘（margin-left）,与包含块的左边想接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此，除非这个元素自己形成了一个新的BFC。

BFC的区域不会与float盒子重叠。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

计算BFC的高度时，浮动元素也参与计算。

如何形成（触发）？

只要元素满足下面任一条件即可。

body 根元素

浮动元素：float 不为 none 的属性值

定位元素：positin 为 absolute、fixed

display：inline-block、table-cell、table-caption、flex、inline-flex

overflow：不为 visibility

BFC用处

清除浮动

.wrap {    width: 250px;    border: 1px solid #000;}section {    float: left;    width: 100px;    height: 100px;    background-color: yellow;}

效果：

由于子元素都是浮动的，受浮动影响，父元素的高度塌陷了，不能根据子元素的高度自动撑开。

解决方案：为.wrap加上overflow:hidden;，使其形成BFC。根据BFC规则第6条，计算高度时会计算 float 元素的高度，达到清除浮动影响的效果。

自适应两栏布局


        
     
    
     
      黑云压城城欲摧，甲光向日金鳞开。角声满天秋色里，塞上燕脂凝夜紫。

div { width: 200px; background: #eee; }aside {  float: left;  width: 100px;  height: 50px;  background-color: aqua;}main {  background-color: magenta;}

效果：

由于左侧浮动，且高度没有外层盒子高，右侧内容的一部分跑到了左侧元素的下方。

解决方案：为main设置overflow:hidden;，触发 main 元素的 BFC ，根据规则的第4、5条，BFC 的区域是独立的，不会与页面其他元素相互影响，且不会与 float 元素重叠，因此可以形成两列自适应布局。

防止垂直 margin 合并


    
     top
    
    
     bottom

section {  background-color: lime;  width: 100px;  height: 50px;}.top {  margin-bottom: 50px;}.bottom {  margin-top: 50px;}

效果：

代码中.top和.bottom的间距加起来有 100px 的 margin 值，但是从页面上只能看到 50px。这是由于它们的外边距相遇发生了合并。

解决方案：为其中的一个元素的外面包裹一层元素，并将这个外层元素设置overflow:hidden;，使其形成BFC。因为 BFC 内部是一个独立的容器，不会与外部相互影响，从而防止 margin 合并。

父子边距重叠

.box {  background: #f00;}.child{  height: 100px;  margin-top: 50px;  background: yellow}

效果：

代码中.child有一个margin-top: 50px;，但是从页面上没有显示出来。这是由于父子上边距重叠了。

解决方案：将外层元素设置overflow:hidden;，使其形成BFC。因为 BFC 内部是一个独立的容器，不会与外部相互影响，从而防止 margin 合并。

IFC

IFC布局规则

在 IFC 中，盒子一个接一个地水平排列，起点是包含盒子的顶部。

在摆放这些盒子时，水平方向上的margin、border、padding在盒子之间得到保留，是有效的，可以通过设置行框的text-align属性改变水平对齐方式。
在垂直方向上，这些盒子可能会以不同的形式来对齐，它们的顶部或底部对齐，或根据其中文字的基线对齐，可以通过vertical-align属性设置垂直对齐方式。