BFC、Flex box 一文带你探索 CSS 布局定位的奥秘

发布于 2022-10-04 23:46:47 字数 20277 浏览 107 评论 0

相信所有前端开发者的入门课，都是从 div 和 css 开始的，CSS 作为基础中的基础，除了让页面因为样式而变得丰富美观外，更是决定了页面元素的排列布局，然而很多时候，当我们对 CSS 一知半解，我们总会在开发中遇到元素不能按照我们所想的那样呈现出来的问题，所以本文就来系统的讲讲 CSS 的布局定位。

首先，我们来了解构成页面的元素。在 CSS 中，我们的每个元素本质上都是一个盒子，盒模型决定了一个元素的大小和他所占大小，盒模型由以下几部分组成：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

那么元素的大小到底取决于什么呢？目前有两种盒模型：W3C 盒模型和IE 盒模型，两种盒模型的计算方法不同，在 CSS 中，我们可以用box-sizing指定使用哪种方式计算：

content-box（W3C 盒模型）：盒子宽高 = 内容宽高（content）
border-box（IE 盒模型）：盒子宽高 = 内容宽高（content） + 内边距（padding）+ 边框（border）

看个例子：

// W3C盒模型
<style>
  .box {
    width: 200px;
    height: 200px;
    padding: 10px;
    margin: 10px;
    border: 5px solid red;
    background-color: yellowgreen;
  }
</style>

<div class="box"></div>

// IE盒模型
<style>
  .box {
    width: 200px;
    height: 200px;
    padding: 10px;
    margin: 10px;
    border: 5px solid red;
    background-color: yellowgreen;
    box-sizing: border-box;
  }
</style>

<div class="box"></div>

所以我们发现，不管是哪一种盒模型，margin 的长度都不会被包含在元素的宽高里，但是 magin 将决定元素在其父元素中的位置。

display用于定义建立布局时元素生成的显示框类型，会影响到兄弟元素之间的布局，他的取值有以下几种：

none：此元素不会被显示。
block：此元素将显示为块级元素，此元素前后会带有换行符。
inline：默认值。此元素会被显示为内联元素，元素前后没有换行符。
inline-block：行内块元素。
list-item：此元素会作为列表显示。
table 相关：此元素会被显示为表格或表格元素。
flex：弹性盒子。
run-in：此元素会根据上下文作为块级元素或内联元素显示。

下面我们将对inline-block，flex，run-in这几个属性做详细讲解。

inline-block

inline-block和float，flex并称实现元素行内显示的 “三巨头”，相比较 flex 的丰富属性，inline-block 就略显朴素，使用也十分简单，看起来似乎完全不值得对它进行详细介绍，但不知道你们在使用的时候是否也踩过那些 inline-block 的坑，所以这里我们来讲讲 inline-block 的必坑指南

避坑指南一：行内元素间隙

我们先来看一个例子：

<div class="content">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

.content {
  background-color: yellow;
  width: 350px;
  height: 100px;
}
.cell {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: red;
}

我们会发现，几个行内元素之间出现了的空隙，这个空隙实际上是因为我们的 HTML 书写导致的，我们编写代码时输入空格、换行都会产生空白符。而浏览器是不会忽略空白符的，对于多个连续的空白符浏览器会自动将其合并成一个，所以就产生了所谓的间隙。想要解决这个间隙，我们可以给父元素设置font-size:0。

<div class="content">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

.content {
  background-color: yellow;
  font-size: 0;
  width: 350px;
  height: 100px;
}
.cell {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: red;
}

避坑指南二：高度塌陷，对齐问题

这个问题，是在开发的时候偶然遇见的，话不多说，先看看这两个例子：

<div class="content">
  <div class="cell">有内容</div>
  <div class="cell"></div>
  <div class="cell">有内容</div>
</div>

.content {
  background-color: 
  font-size: 0;
  width: 350px;
  height: 100px;
}
.cell {
  display: inline-block;
  width: 100px;
  height: 50px;
  font-size: 16px;
  background-color: 
  color: 
}

在这个例子里，我们发现有字的行内块元素和没有字的行内块元素显示不在同一高度。然后我们再看另一个例子：

<div class="content">
  <div class="cell">有内容</div>
  <div class="cell">有内容</div>
  <div class="cell">有内容</div>
</div>

.content {
  background-color: 
  font-size: 0;
  width: 350px;
  height: 100px;
}
.cell {
  display: inline-block;
  box-sizing: border-box;
  width: 100px;
  height: 50px;
  line-height: 50px;
  border-radius: 50px;
  margin: 5px;
  font-size: 16px;
  text-align: center;
  background-color: 
  color: 
}
.active {
  border: 2px solid 
  color: 
}

let spec = document.getElementById("spec");
let flag = false;
spec.addEventListener("click", () => {
  flag = !flag;
  if (flag) {
    spec.classList.add('active')
  } else {
    spec.classList.remove('active')
  }
});

我们会发现，当中间的元素添加了边框后，三个行内元素都发生了上下抖动，那是否是因为他们的高度发生了变化呢？

测量结果显示，这三个元素的高度一样，并没有发生改变，那么究竟是什么原因导致了行内元素高度塌陷、上下抖动的呢？

其实造成这一结果的是vertical-align属性。inline-block作为行内块元素，也遵循行内元素的vertical-align垂直对齐方式，vertical-align的取值有以下几种：

baseline：将元素的基线与父元素的基线对齐。
sub：将元素的基线与其父元素的下标基线对齐。
super：将元素的基线与其父代的上标 - 基线对齐。
text-top：将元素的顶部与父元素的字体顶部对齐。
text-bottom：将元素的底部与父元素的字体的底部对齐。
middle：将元素的中间与基线对齐加上父元素的 x-height 的一半。
top：将元素的顶部和其后代与整行的顶部对齐。
bottom：将元素的底部和其后代与整行的底部对齐。
<length>：将元素的基线对准给定长度高于其父元素的基线。
<percentage>：像 <长度> 值，百分比是 line-height 属性的百分比。

在默认情况下，会根据baseline进行定位，文字的定位不同，最终导致了整个块元素的高度塌陷。想要解决这一问题，我们只需将vertical-align设置为top，如下：情况一：

<div class="content">
  <div class="cell">有内容</div>
  <div class="cell"></div>
  <div class="cell">有内容</div>
</div>

.content {
  background-color: 
  font-size: 0;
  width: 350px;
  height: 100px;
}
.cell {
  display: inline-block;
  vertical-align: top;
  width: 100px;
  height: 50px;
  font-size: 16px;
  background-color: 
  color: 
}

情况二：

<div class="content">
  <div class="cell">有内容</div>
  <div class="cell">有内容</div>
  <div class="cell">有内容</div>
</div>

.content {
  background-color: 
  font-size: 0;
  width: 350px;
  height: 100px;
}
.cell {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  width: 100px;
  height: 50px;
  line-height: 50px;
  border-radius: 50px;
  margin: 5px;
  font-size: 16px;
  text-align: center;
  background-color: 
  color: 
}
.active {
  border: 2px solid 
  color: 
}

let spec = document.getElementById("spec");
let flag = false;
spec.addEventListener("click", () => {
  flag = !flag;
  if (flag) {
    spec.classList.add('active')
  } else {
    spec.classList.remove('active')
  }
});

run-in

run-in 这个属性值是在 css3 中被引入的，官方对他的描述是:

此元素会根据上下文作为块级元素或内联元素显示。

这个说法让人会有些摸不着头脑，所以我们直接来看个例子。

在设计文章样式的时候，也许你遇到过需要在一行内显示一个标题和一段内容的场景，如果使用h标签和p标签我们可能得到的是下面这种结果：

<div class="article">
  <h1>One Point.</h1><p>Here is the description.If a run-in element precedes a block level element, the run in element will behave structurally as if it has become the block level elements first inline child element.</p>
</div>

当我们将h标签的 display 属性变成run-in时，结果就变成了这样。

h1 {
  display: run-in;
}

<div class="article">
  <h1>One Point.</h1><p>Here is the description.If a run-in element precedes a block level element, the run in element will behave structurally as if it has become the block level elements first inline child element.</p>
</div>

为了更好的理解 run-in，我们把它和 float，inline-block 的布局效果做比较：

h1 {
  float: left;
}

<div class="article">
  <h1>One Point.</h1><p>Here is the description.If a run-in element precedes a block level element, the run in element will behave structurally as if it has become the block level elements first inline child element.</p>
</div>

当使用 float 的时候，我们发现左边的标题会占据多行，这和我们的预期显然有些差距。

h1 {
  display: inline-block;
}

<div class="article">
  <h1>One Point.</h1><p>Here is the description.If a run-in element precedes a block level element, the run in element will behave structurally as if it has become the block level elements first inline child element.</p>
</div>

当使用 inline-block 的时候，当内容有多行，标题和内容不能在一行显示，现在我们就能够明白run-in究竟做了什么：

当该元素的下文是 block 时，该元素将表现为 inline-block
当该元素的下文是 inline-block 时，该元素将表现为 block

虽然这个属性看起来十分便利，但是这个属性已经被大多数浏览器舍弃了，这也是为什么我们平时听到的不是特别多的原因，浏览器认为 run-in 破坏了 HTML 的表现，这些样式上的实现，应该通过 CSS 去调节。所以对于这个属性，大家做个了解就可以啦。

Flex box

Flex box可能是目前用来做自适应用的最多的布局方式了，Flex 使用的丰富，也为开发者提供了更便捷更可靠的布局。

容器属性

flex-direction

决定主轴的方向（即项目的排列方向）。取值：

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap

决定了子元素如何换行。取值：

nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

flex-flow

是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap。

justify-content

决定了项目在主轴上的对齐方式。取值：

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍。

align-items

决定了项目在交叉轴上如何对齐。取值：

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。+
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为 auto，将占满整个容器的高度。

align-content

决定了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。取值：

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

子元素属性

order

决定项目的排列顺序。数值越小，排列越靠前，默认为 0。

flex-grow

决定项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。

flex-shrink

决定项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。

flex-basis

决定在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即项目的本来大小。

flex

是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选。

align-self

允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

注意点

设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

在 Flex box 被广泛使用以前，我们经常会利用 float 来实现块元素行内两端显示，它的使用也十分简单，float 属性有以下几种取值：

none：默认值，没有浮动效果。
left：元素浮动到父元素左侧。
right：元素浮动到父元素右侧。
inherit：规定应该从父元素继承 float 属性的值。

float 本身没有什么难度，但是设置了 float 会导致父元素的无法被撑开，margin 失效，所以清除 float 也就成了开发必备知识。

清除浮动

原始效果：

<div class="content">
  <div class="cell spe1">块1</div>
  <div class="cell spe2">块2</div>
</div>

.content {
  background-color: 
  font-size: 0;
  width: 350px;
}
.cell {
  font-size: 16px;
  background-color: 
  color: 
}
.spe1 {
  width: 80px;
  height: 20px;
  float: left;
}
.spe2 {
  width: 80px;
  height: 30px;
  float: right;
}

方法一：设置空元素

<div class="content">
  <div class="cell spe1">块1</div>
  <div class="cell spe2">块2</div>
  <div class="clr"></div>
</div>

.clr {
  clear: both;
}

方法二：after 伪元素

.content:after {
  content: '';
  display: block;
  visibility: hidden;
  clear: both;
}

该方法也是利用 clear:both 来清除浮动，与方法一的区别在于，方法一添加了一个 clear 元素，而这一个是在元素内部增加一个类似于 clear 的效果，其中有几个注意点：

content：可以为空，也可以取任意值。
display：必须设置为 block，否则在 FF/chrome/opera/IE8 下不能正常起作用。
visibility：设置为 hidden 是为了允许浏览器渲染它，但是不显示出来。

方法三：利用 overflow:hidden 属性

.content {
  overflow: hidden;
}

通过设置 overflow 达到清除浮动效果，其原理是创建了一个 BFC，有关 BFC 的知识，我们会在后面章节里详细介绍。

position属性决定了某个元素的定位方式，它的取值有以下几种：

static：该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。
relative：该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。
absolute：元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
fixed：元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。
sticky：元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括 table-related 元素，基于 top, right, bottom, 和 left 的值进行偏移。偏移值不会影响任何其他元素的位置。

在这些属性里，其中relative我们称之为相对定位，absolute为绝对定位，fixed为固定定位，sticky为粘性定位，而这几个定位又可以区分为Normal flow（常规流）和Unnormal Flow（非常规流）。

Normal flow（常规流）

属于常规流的取值：

static
relative

常规流具备以下特性：

盒一个接着一个排列;
在块级格式化上下文里面，元素竖着排列；
在行内格式化上下文里面，元素横着排列;
对于静态定位 (static positioning)，position: static，盒的位置是常规流布局里的位置；
对于相对定位 (relative positioning)，position: relative，盒偏移位置由这些属性定义 top，bottom，leftandright。即使有偏移，仍然保留原有的位置，其它常规流不能占用这个位置。

常规流里的元素属于格式上下文（formatting context），块元素和行内元素表现不同会产生快格式上下文和行内格式上下文，也就是我们常说的BFC和IFC。

BFC (Block Formatting Context)

BFC 的创建方法:

根元素或其它包含它的元素。
浮动 (元素的 float 不为 none)。
绝对定位元素 (元素的 position 为 absolute 或 fixed)。
行内块 inline-blocks(元素的 display: inline-block)。
表格单元格 (元素的 display: table-cell，HTML 表格单元格默认属性)。
overflow 的值不为 visible 的元素。
弹性盒 flex boxes(元素的 display: flex 或 inline-flex)。

BFC 的本质就是创建一个隔离的空间，他的具体效果如下：

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

对于上述效果，除了 1 和 3，似乎都让人有些摸不着头脑，那么就让我们通过几个例子来仔细研究一下。

案例一：margin collapse

首先我们来了解一下什么是外边距折叠（margin collapse）。在 CSS 中，两个或多个毗邻的普通流中的盒子（可能是父子元素，也可能是兄弟元素）在垂直方向上的外边距会发生折叠，这种形成的外边距称之为外边距折叠。

那么什么时候外边距会发生折叠呢？发生折叠需要满足这几种情况：

都属于普通流的 Block box 且参与到相同的 BFC 中
没有被 padding、border、clear 和 line box 分隔开都属于垂直毗邻盒子边缘：
1. 盒子的 top margin 和它第一个普通流子元素的 top margin
1. 盒子的 bottom margin 和它下一个普通流兄弟的 top margin
1. 盒子的 bottom margin 和它父元素的 bottom margin
1. 盒子的 top margin 和 bottom margin，且没有创建一个新的块级格式上下文，且有被计算为 0 的 min-height，被计算为 0 或 auto 的 height，且没有普通流子元素

下面让我们来看看代码实例：

<div class="top"></div>
<div class="content">
  <div class="cell"></div>
  <div class="cell"></div>
</div>
<div class="foot">
  <div class="cell2"></div>
  <div class="spe"></div>
  <div class="cell2"></div>
</div>

.top {
  background-color: 
  width: 100px;
  height: 50px;
}
.content {
  margin-top: 10px;
  background-color: 
  width: 350px;
  margin-bottom: 10px;
}
.cell {
  margin-top: 20px;
  background-color: 
  height: 20px;
  margin-bottom: 30px;
}
.foot {
  background-color: 
  width: 100px;
}
.spe {
  margin: 20px 0 30px;
}
.cell2 {
  height: 20px;
  background-color: 
}

.content和.cell的上边距折叠属于第一条，最终.content和.top之间的边距为 20px。
.cell之间的边距折叠属于第二条，最终.cell之间的边距为 30px。
.cell和.content的下边距折叠属于第三条，最终.content和.foot之间的边距为 30px。
.spe自己的上下边距折叠属于第四条，最终.spe占据的间隔为 30px。

现在我们知道了 margin collapse 发生的情况，那我们盖如何避免边距折叠呢？方法有以下几种：

浮动元素不会与任何元素发生折叠，也包括它的子元素。
创建了 BFC 的元素不会和它的子元素发生外边距折叠。
绝对定位元素和其他任何元素之间不发生外边距折叠，也包括它的子元素。
inline-block 元素和其他任何元素之间不发生外边距叠加，也包括它的子元素。
给常规流中的块级元素添加 padding、border、clear 属性。

案例二：BFC 计算高度包含浮动盒

<div class="BFC">
  <div class="left"></div>
  <div class="right"></div>
</div>

.BFC {
  background-color: 
}
.left {
  float: left;
  background-color: 
  width: 100px;
  height:50px;
  opacity: 0.6;
}
.right {
  width: 150px;
  background-color: 
  height:30px;
}

在我们没有创建 BFC 的时候，父元素的高度不包含浮动元素高度。

.BFC {
  background-color: 
  overflow: hidden;
}

创建 BFC 后，父元素就会加上浮动元素高度，这个就是我们在之前提到的清除浮动的方法之一。

实例三：BFC 内部不受浮动元素影响

<div class="BFC content">
  <div class="left"></div>
  <div class="right BFC">
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>

.BFC {
  overflow: hidden;
}
.content {
  background-color: 
}
.left {
  float: left;
  background-color: 
  width: 100px;
  height:50px;
  opacity: 0.6;
}
.right {
  width: 150px;
  background-color: 
  height:30px;
}
.cell {
  width: 20px;
  margin: 5px;
  background-color: 
  height:20px;
  display: inline-block;
}

从这个例子，我们就可以理解，BFC 布局规则里的第 4 和第 6 条：

BFC 内部是一个独立区域，不会受到外部元素的影响。
BFC 外部的浮动不会和 BFC 发生重叠。

IFC (Inline Formatting Context)

IFC 由 inline 元素构成，它的布局规则是这样的：

高度由其包含行内元素中最高的实际高度计算而来。
IFC 中的 line box 一般左右都贴紧整个 IFC，但是会因为 float 元素而扰乱。float 元素会位于 IFC 与与 line box 之间，使得 line box 宽度缩短。
同个 ifc 下的多个 line box 高度会不同。
水平的 margin、padding、border 有效，垂直无效。不能指定宽高。
行框的高度由行高来决定。

那么 IFC 一般有什么用呢？

水平居中：当一个块要在环境中水平居中时，设置其为 inline-block 则会在外层产生 IFC，通过 text-align 则可以使其水平居中。
垂直居中：创建一个 IFC，用其中一个元素撑开父元素的高度，然后设置其 vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

Unnormal Flow（非常规流）

属于非常规流的取值：

absolute
fixed
sticky

对于非常规流，因为他们脱离了正常的文档流，所以他们不会对正常流的元素造成影响，很多时候我们都会配合z-index使用，前两种相信大家都不陌生，所以就不再多做介绍啦，下面我们来讲讲sticky。

粘性定位（sticky)

粘性定位（sticky) 可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

<div class="content">
  <h1 class="title">我是一块内容</h1>
  <div class="sticky"></div>
  <div class="main"></div>
</div>

.content {
  background-color: 
}
.title {
  color: 
}
.sticky {
  position: sticky;
  top: 0px;
  background-color: 
  width: 100px;
  height:50px;
}
.main {
  width:150px;
  height: 900px;
}

使用 sticky 布局的时候有几个注意点：

父级元素不能有任何 overflow:visible 以外的 overflow 设置。
父级元素设置和粘性定位元素等高的固定的 height 高度值，或者高度计算值和粘性定位元素高度一样，没有粘滞效果。
同一个父容器中的 sticky 元素，如果定位值相等，则会重叠；如果属于不同父元素，且这些父元素正好紧密相连，则会鸠占鹊巢，挤开原来的元素，形成依次占位的效果。
sticky 定位，不仅可以设置 top，基于滚动容器上边缘定位；还可以设置 bottom，也就是相对底部粘滞。如果是水平滚动，也可以设置 left 和 right 值。
z-index 无效。

VFC，也就是Visual formatting context，虚拟格式上下文，他有BFC，IFC，GFC和FFC这几种类型，在前文中，我们已经介绍了BFC，IFC，这里再简单介绍下GFC和FFC。

GFC

GFC(GridLayout Formatting Contexts)，"网格布局格式化上下文"，当为一个元素设置 display 值为 grid 的时候，此元素将会获得一个独立的渲染区域。

我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。

那么 GFC 有什么用呢，和 table 又有什么区别呢？首先同样是一个二维的表格，但 GridLayout 会有更加丰富的属性来控制行列，控制对齐以及更为精细的渲染语义和控制。