CSS布局-浮动与定位与多列布局

1 浮动 float

浮动属性最初只用在成块的文本内的图像上，使用浮动来布局页面被看做传统的布局方法。

1.1 添加浮动

浮动元素会脱离正常的文档布局流，并吸附到其父容器的左/右边元素）。在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其右/左侧的空间。

1
2
3

.box {
    float: left;  /*  left和right */
}

1.2 清除浮动

一个浮动元素会被移出正常文档流，且其他元素会显示在它的下方。如果我们不想让剩余元素也受到浮动元素的影响，我们需要停止它；这是通过添加 clear 属性实现的。

1
2
3

.cleared {
  clear: left;
}

clear 属性接受下列值：

left：停止任何活动的左浮动
right：停止任何活动的右浮动
both：停止任何活动的左右浮动

1.3 清除浮动元素周围的盒子

第一种方式，其过程为：先向包含浮动内容及其本身的盒子后方插入一些生成的内容，并将生成的内容清除浮动。（比较传统的形式）

.wrapper::after {
  content: "";
  clear: both;
  display: block;
}

这种方式和在盒子后面手动添加类似div的块元素，并设置样式为clear:both的效果是一样的。

第二种方式使用 overflow(以上方案的替代方法)。

将包裹元素的 overflow属性设置为visible外其他的值。

1
2
3

.wrapper {
  overflow: auto; /* 设置为auto */
}

大部分情况下这种小技巧都可以奏效，但是可能会出现莫名其妙的滚动条或裁剪阴影，这是使用 overflow 带来的一些副作用。

第三种形式，比较现代的形式。

使用display:flow-root可以无需小技巧来创建块格式化上下文（BFC），在使用上没有副作用。

1
2
3

.wrapper {
  display: flow-root;
}

2 定位 position

理解定位首先熟悉文档流。

文档流

围绕元素内容添加任何内边距，边界和外边距来布置单个元素盒子，这就是盒模型。默认请况下，块级元素的宽度是父级元素宽度的100%，高度是内容的高度，内联元素的宽高和内容一样宽高一样，不能对内联元素设置宽–他们只是位于块级元素的内容中，如果要控制内联元素的大小需要将其设置为display:block。

正常的布局流是将元素放置在浏览器视口内的系统，块级元素在视口中垂直布局——每个都将显示在上一个元素下面的新行上，并且它们的外边距将分隔开它们；

内联元素表现不一样——它们不会出现在新行上；相反，它们互相之间以及任何相邻（或被包裹）的文本内容位于同一行上，只要在父块级元素的宽度内有空间可以这样做。如果没有空间，那么溢流的文本或元素将向下移动到新行。

如果两个相邻元素都在其上设置外边距，并且两个外边距接触，则两个外边距中的较大者保留，较小的一个消失——这叫外边距折叠。

定位是允许我们覆盖上面描述的基本文档流行为。

2.1 静态定位 static

1
2
3

.positioned {
  position: static;
}

静态定位是每个元素获取的默认值–它只是意味着“将元素放入它在文档布局流中的正常位置。

2.2 相对定位 relative

1
2
3

.positioned {
  position: relative;
}

他与静态定位非常相似。占据在正常文档流中，可以通过 top、bottom、left、right改变元素的位置。

以上四个值是用来精确指定元素的位置，

.positioned {
    position: relative;
    top: 30px;
    left: 30px;
}

2.3 绝对定位 absolute

1
2
3

.positioned {
  position: absolute;
}

绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。这意味着我们可以创建不干扰页面上其他元素的位置的隔离的 UI 功能。例如，弹出信息框和控制菜单；翻转面板；可以在页面上的任何地方拖放的 UI 功能……

==绝对定位是根据他的父元素的position 属性来进行绝对定位==，如果所有的父元素都没有显式地定义 position 属性，那么所有的父元素默认情况下 position 属性都是 static。绝对定位元素会被放在元素的外面，并且根据浏览器视口来定位。

2.4 z-index

当元素开始重叠的时候，是什么决定了那些元素应该出现在顶层，哪些在底层？

在定位上下文中只有一个定位的元素，它出现在顶部，因为定位的元素胜过未定位的元素。

网页也有一个 z 轴：一条从屏幕到面前的线，z-index 值影响定位元素位于该轴上的位置；正值将它们移动到顶层即向屏幕外垂直延伸到面前，负值将它们向下移动到底层向屏幕里垂直延伸。默认情况下，定位的元素都具有 z-index 为 auto，实际上为 0。

z-index 只接受无单位索引值。

2.5 固定定位 fixed

这种定位方式与绝对定位的方式完全相同，只有一个区别：绝对定位将元素固定在相对于其位置最近的祖先。（（如果没有，则为初始包含它的块）而固定定位固定元素则是相对于浏览器视口本身

1
2
3

.positioned {
  position: fixed;
}

相对位置和固定位置的混合体 sticky

1
2
3

.positioned {
  position: sticky;
}

这个值比其他的值要新，他是相对位置个绝对位置的混合体，表现行为和相对定位一样，直到它滚动到某个阈值点为止，他就变得固定了。

sticky 一种常用的用法，是创建一个滚动索引页面。在此页面上，不同的标题会停留在页面顶部。

.positioned {
    position: sticky;
    top: 0;
}

3 多列布局

3.1 设置列数 column-count

创建的这些列具有弹性的宽度 — 由浏览器计算出每一列分配多少空间。

3.2 设置列宽 column-width

浏览器将按照你指定的宽度尽可能多的创建列；任何剩余的空间之后会被现有的列平分。这意味着你可能无法期望得到你指定宽度，除非容器的宽度刚好可以被你指定的宽度除尽。

3.3 给多列增加样式

Multicol 创建的列无法单独的设定样式。不存在让单独某一列比其他列更大的方法，同样无法为某一特定的列设置独特的背景色、文本颜色。

column-gap 改变列间间隙。
column-rule 在列间加入分割线。

column-rule。和 border属性类似， column-rule 是 column-rule-color和 column-rule-style的缩写，接受同 border 一样的单位。

.container {
  column-count: 3;
  column-gap: 20px;
  column-rule: 4px dotted rgb(79, 185, 227);
}

3.4 列与内容折断

使用对列布局时把内容放入多列布局容器内，内容被拆成碎块放进列中，从而影响阅读体验。可以在列上使用这一属性避免break-inside:avoid。现阶段旧属性 page-break-inside: avoid 能够获得更好的浏览器支持。