# css中BFC、 relative、absolute、 float、 overflow和z-index 你真的了解吗？

Shirley_liang
1,479 阅读5分钟

一、BFC

在学习这些知识之前，我们先来了解下BFC。

BFC全称是Block Formatting Context，即块格式化上下文。 块格式上下文是页面CSS视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。

1、BFC的创建方法

  • 根元素(html的根元素就是html);
  • 浮动（元素的float不为none）;
  • 绝对定位元素（元素的定位为absolute或者fixed）;
  • 行内块（元素的display: inline-block）;
  • 表格单元格（元素的display: table-cell, HTML表格单元格默认属性）;
  • 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
  • 弹性盒（元素的display: flex 或者inline-flex）。

但其中最常见就是 overflow：hidden; float: left/right; position: absolute;也就是我们看到这些属性的时候，该元素就创建一个BFC了。

2、BFC的范围

BFC范围在MDN的描述：

A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.

翻译过来就是一个BFC包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内部元素。这也说明BFC的隔离性，

3、BFC的效果

BFC是一个隔离的独立容器

归纳如下:

  1. 内部的盒子会在垂直方向一个接一个排列；
  2. 处于同一个BFC中的元素相互影响，可能会发生margin 塌陷。
  3. 每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；
  4. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；
  5. 计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；
  6. 浮动盒区域不叠加到BFC上，也就是常遇到的高度塌陷。

BFC实例可以参考这篇文章中的实例

二、position: relative

position: relative 和 position: static 基本相同，唯一区别就是position: relative，可以定义top、bottom、left 和 right 这四个偏移量。即使有偏移，仍然保留原有的位置，其它常规流不能占用这个位置。

实例链接

三个特性：限制定位（absolute定位不能超过它）、限制层级(受父层z-index的限制)、限制overflow

注意：

  1. 尽量避免使用relative

  2. relative 最小化

三、position: absolute

position: absolute 具有包裹性和破坏性（高度塌陷）。

注意：

  1. 尽量使用无依赖绝对定位，因为这种定位有跟随性（BFC的特性）；
  2. 动画尽量作用在绝对定位元素上（减少重绘和回流，提高性能）；
  3. absolute top bottom / left right都设置后，会产生爆裂拉伸，效果和设置width和height相同。

四、float

float产生初衷是文字环绕布局。它和absolute一样，具有包裹性和破坏性。

浮动的特性

  1. 浮动可以让布局变成block布局
  2. 浮动可以去空格

清除浮动的方法

.clearfix::after {
    content: "";
    display: block;
    height: 0;
    overflow: hidden;
    clear: both;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

只需给父元素增加，其实原理就是父元素变为BFC,和外面元素布局脱离关系

五、overflow

1. overflow属性值

overflow: visible（初始值） | scroll | hidden | auto | inherit;

2. overflow在那个元素上有效？

overflow: 它只能应用于块容器上。 其中，块容器是指除了 table 和置换元素之外的块级元素都是块容器元素。

3. overlfow的作用

overflow 属性的作用是一个块容器元素在其内容溢出这个元素的时候，内容是否 裁掉。

  1. overflow与BFC overflow属性值不为visible时，可以创建BFC。 它的常见作用就是消除浮动、左侧固定右侧自适应（不需要指定 margin-left ）、margin 不再穿透等。
  2. overflow与absolute, 剪裁和滚动失效；

失效原因：

绝对定位元素不总是被父级overflow属性剪裁，尤其当overflow在绝对定位元素及其包含块之间的时候。

包含块是指含“position:relative/fixed/absolute声明的父级元素，没有则body元素”

如何避免失效？

  1. overflow自身为包含块
  2. overflow的子元素为包含块
  3. overflow子元素transform声明当作包含块（chrome兼容性可能有问题）
  4. resize与 overflow：hidden 搭配， 实现拉伸收缩效果
  5. overflow:hidden 搭配 white-space:nowrap、text-overflow:ellipsis实现...效果

注意：

  1. 设置一个轴为visible（默认值），同时设置另一个轴为不同的值，会导致设置visible的轴的行为会变成auto;
  2. 无论什么浏览器，默认滚动条均来自,而不是标签；
  3. ios原生滚动回调效果：-webkit-overflow-scrolling: touch。

六、z-index

在了解z-index之前，需要先了解层叠上下文和层叠顺序。

1. 什么是层叠上下文

层叠上下文是一个概念，跟「块状格式化上下文(BFC)」类似。 层叠上下文，英文称作”stacking context”， 是HTML中的一个三维的概念。如果一个元素含有层叠上下文，我们可以理解为这个元素在z轴上就“高人一等”。

2. 什么是层叠水平

层叠水平英文称作”stacking level”，决定了同一个层叠上下文中元素在z轴上的显示顺序。 普通元素的层叠水平优先由层叠上下文决定，因此，层叠水平的比较只有在当前层叠上下文元素中才有意义。

3. 什么是层叠顺序

层叠顺序英文称作”stacking order”. 表示元素发生层叠时候有着特定的垂直显示顺序，注意，这里跟上面两个不一样，上面的层叠上下文和层叠水平是概念，而这里的层叠顺序是规则。

4.如何创建层叠顺序

  1. 页面根元素天生具有层叠上下文，称之为“根层叠上下文”。
  2. z-index值为数值的定位元素的传统层叠上下文，即z-index不为auto的时候。
  3. 其他CSS3属性。

z-index支持负值 支持css3 animation动画

avatar
文章
阅读
粉丝