关于 CSS 布局——传统的布局解决方案

传统的布局解决方案

display 属性 + position 属性 + float 属性 + z-index 属性

关于 display

• div 是一个标准的 block 元素；
• span 是一个标准的 inline 元素；
• none 可以隐藏元素时期不显示；

关于

CSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和left 属性则决定了该元素的最终位置。

• static
  该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时top, right, bottom, left和z-index属性无效。

• relative
  该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group,table-row, table-column, table-cell, table-caption元素无效。

• absolute
  不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置margin，且不会与其他边距合并。绝对定位和 float 混用会使 float 失效。

• sticky
  盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。
  

  红色盒子 position: sticky 效果图

关于

float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。

• float 元素的定位
  当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
• clear 清除浮动
  元素向下移动清除之前的浮动，常见的值有left,right,both,none 。
  
• clearfix 密技
  在浮动的父元素上添加clearfix选择器。
  

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

关于

当元素之间重叠的时候，z-order 决定哪一个元素覆盖在其余元素的上方显示。 通常来说 z-index 较大的元素会覆盖较小的一个。