定位+浮动

脱离文档流：绝对定位、固定定位、浮动

定位 — position

定位方式为：top、left、bottom、right。加上margin无效。
使用绝对定位和固定定位后，行内元素变成块元素

相对定位 — relative

1. 占据原先位置（不脱离文档流）
2. 从自身位置出发

绝对定位 — absolute

1. 不占据原先位置（脱离文档流）
2. 位置从浏览器出发（一般情况需要给父元素加上相对定位 — 使其从父元素位置出发【父相子绝】）
3. 行内块元素使用，变为块元素

固定定位 — fixed

1. 不占据原先位置（脱离文档流）

2. 位置从浏览器出发（与父盒子无关）

3. 行内块元素使用后变为块元素

   position 的值
   

通过position属性进行居中对齐

/* 上下左右全局中 */
标签选择器{
    position: relative;	// 相对定位
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); // 上下左右全局中
  }
/* 上下局中 */
标签选择器{
    position: relative;	// 相对定位
    top: 50%;
    transform: translateY(-50%); // 上下局中
  }
  /* 左右局中 */
标签选择器{
    position: relative;	// 相对定位
    left: 50%;
    transform: translateX(-50%); // 左右局中
  }

浮动 — float

浮动的属性值

4. 脱离文档流，向指定方向移动，遇到 父元素边界或者 相邻浮动元素才会停下来
5. 父元素没有设置宽高，子元素设置浮动会导致父元素高度为零（需要清除浮动）。

当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

清除浮动的方式

1. 伪元素 — 通常使用
2. 加高法 — 给父盒子添加
3. clear：both — 在最后一个标签后面新建标签同时加上clear:both
4. 隔墙法
5. overflow：hidden — 给父元素添加
6. BFC

伪元素清除浮动

给父盒子添加

父盒子标签::after{
        display: block;
        /*给伪元素赋值*/
        content: '';
        /* 清理浮动 */
        clear: both;
    }

BFC清除浮动

特点

1. 子元素的上下边距都由margin控制
2. 区域不会与浮动元素重叠
3. 在计算自己的高度时会将浮动元素高度计算在内

将普通元素转换为BFC元素的四种方法

position: absolute / fixed;
overflow: hidden;
display: : inline / inline-block;
float: left / right;