CSS布局，浮动与定位布局

默认的文档流（不加任何修饰，自动布局）

块级元素 上下结构
行内元素 左右结构
块级元素宽度为父级的百分百

项目应用：第一层布局 div默认 h5语义标签

display:

block 块级元素默认
inline-block 项目应用：简单的菜单 行内块级元素
inline 行内元素默认

float脱离文档流

脱离文档流，对后续元素的结构有影响
多个浮动元素在一个浮动流中并排显示，如果一排放不下，就会换行显示
对父元素没有支撑作用

清除浮动

位于浮动元素下的非浮动元素会显示到浮动元素的下面，非浮动元素中的文字会环绕在浮动元素周围，这并不是我们想要的。要想让该非浮动元素位于浮动元素之后 （单独一行）需要清除浮动。

父元素 添加overflow:hidden;(不推荐使用)

• 优点：代码简洁
• 缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素，不推荐使用

最后一个浮动标签后 额外标签法 clear:both;（不推荐使用）

div.clear{float:none;/height:0;/clear:both;}

在最后一个浮动标签后，新加一个标签，给其设置clear：both；

• 优点：通俗易懂，方便
• 缺点：添加无意义标签，语义化差

父元素 伪元素，使用after伪元素清除浮动（推荐使用）

首先给浮动的元素加一个父容器
给这个父容器添加一个类 样式 clearxxx

clearxxx的设置如下:
.clearxxx::after{
    content: "";
    display: block;
    clear: both;}

• 优点：符合闭合浮动思想，结构语义化正确
• 缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout

原理：假元素，空元素， 后面跟了一个空的块级元素

定位（利用position属性）布局

static：静态定位

1. 默认布局，是所有元素的默认定位方式。意味着将一个元素定位在默认文档流中
2. 类如top，left之类的属性设定不起作用，只有类如margin-top的属性设定才起作用

相对定位

1. 不脱离文档流，原先位置保留
   • 元素本身浮动时，所在位置不会被后面元素占据
   • 前一个元素float，脱离文档流，后一个元素若是相对定位，相对的起始位置会因前面元素浮动而发生变化
2. 如果不设置top，bottom，left，right属性，依然在原位置。对于相对定位的元素，可以通过属性top,bottom,left,right来改变元素的最终位置。元素移动的时候是相对于当前元素所在的位置进行移动
3. 块级宽度100%，宽度依旧保持百分百
4. top与margin-top对元素都发生作用，这两设定不互相影响，不会抵消（static定位时，类如top，left之类的设定不起作用，只有类如margin-top的属性设定才起作用）

绝对定位 absolute

1. 元素脱离了文档流，即不在原来的位置上。
2. 在没有设置定位属性的情况下，默认在原先的位置脱离文档流。
3. 不干扰其他元素在页面中的位置，显示在其他元素的上方。
4. 没有定位祖先元素的，相对于视口区的左上角定位。
5. 有定位祖先元素的，相对于定位祖先元素进行定位。

粘性定位（ Sticky positioning ） CSS3新增（特有）

结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

设置了position: sticky的元素并不脱离文档流，仍然保留元素原本在文档流中的位置。

当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动（此时相当于fixed定位）。

元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以 滚动，那么是相对于viewport(视口区)来计算元素的偏移量。

position: sticky;

实际应用场景：网易严选右侧

注意点：由于是relative+fixed ,设置粘性定位的盒子 需要写在body下面 ，否则不起作用

z-index

不加position不生效，两个元素同时要加position
当两个定位元素叠加在一起的时候，可以使用“z-index”来改变两个定位元素出现的顺序（ z-index 取值无需指定单位，值大的显示在上方。 ）

分类

satatic 静态定位：不脱离文档流，

relative 相对定位：不脱离文档流，原有位置依旧占据

absolute 绝对定位：脱离了文档流，原有位置不保留

fixed 固定定位：脱离了文档流，原先位置不保留

定位常用搭配：

浮动布局

float+margin clear

定位布局：

positon：static 没有搭配
position：relative，absolute，fixed（主要找临界值）+top/left/right/bottom+ z-index