浮动与定位

浮动

• 要浮动，并排的盒子都要设置浮动
• 浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流，一律能够设置宽度和高度

BFC

BFC（ Box Formatting Context，块级格式化上下文） 是一块独立渲染区域，内部元素的渲染不会影响边界以外的元素，反之亦然

如何创建 BFC

1. float 的值不是 none

2. positon 的值是 absloute 或者 fixed

3. display 的值是 inline-block,flex,或者 inline-flex

4. overflow的值不是visible

BFC 的作用

1. 清除浮动
2. BFC 可以取消盒子 margin 塌陷
3. BFC可以阻止元素被浮动元素覆盖

清除浮动

浮动导致父元素高度塌陷

    <div>
        <p></p>
        <p></p>
    </div>
    <div>
        <p></p>
        <p></p>
    </div>

				p{
            float: left;
            width: 100px;
            height: 100px;
            background-color:orange;
            margin-right: 20px;
        }

子元素浮动则父元素高度塌陷，必然会影响后面元素布局和定位,所以需要去清除浮动的影响

因为盒子内容不知道的情况下不好设置高度,可采用下面几种方法：

1. 让内部有浮动的父盒子形成 BFC,此时最简单的方法就是 overflow:hidden 属性

2. 给后面的父盒子设置 clear:both 属性。（不太推荐，此时两个父盒子的高度仍然为 0,margin 失效）

3. 使用::after 伪元素给盒子添加最后一个子元素，并且给::after 设置 clear:both(margin 有效)

/*   给两个盒子加上clearfix类名*/
.clearfix::after {
  content: '';
  clear: both;
  /*  一定要转为块级元素,clear属性只对块级元素才有效  */
  display: block;
}

4. 在两个盒子之间加一个div 盒子，设置 clear:both（此时两个父盒子仍然没有高度，margin 失效，但是可以通过设置两个父盒子之间的盒子的高度实现缝隙效果）

定位

相对定位

position:relative;

• 盒子可以相对自己原来的位置进行位置调整，称为相对定位
• 相对定位的元素，会在“老家留坑”，本质上仍然是在原来的位置，只不过渲染在新的地方而已，渲染的图形可以比喻成“影子”，不会对页面其他元素产生任何影响，有可能会出现覆盖其他元素的情况

用途

1. 微调元素位置
2. 相对定位的元素，可以用作绝对定位的参考盒子

绝对定位

position:absloute;

盒子可以在浏览器中以坐标进行位置精准描述，拥有自己的绝对位置

绝对定位脱离标准文档流

• 绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对它们进行压盖。
• 脱离标准文档流的方法：浮动、绝对定位、固定定位

绝对定位的参考盒子

• 绝对定位的盒子会以自己祖先元素中，离自己最近的拥有定位属性的盒子，当做基准点。这个盒子通常是相对定位的，所以这个性质也叫作“ 子绝父相 ”
• 如果所有的父元素都没有显式地定义position属性，绝对定位的盒子会根据浏览器视口来定位

绝对定位的盒子垂直水平居中

position: absloute;
/* 距离浏览器上边50%  */
top: 50%;
margin-top: -自己高度的一半;
left: 50%;
margin-left: -自己宽度的一半;

在不知道自身宽高的情况下，可以利用 translate()来进行水平垂直居中

position: absolute;
top: 50%;
left: 50%;
/* translate(-50%,-50%)作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。  */
transform: translate(-50%, -50%);

堆叠顺序 z-index 属性

z-index 仅能在定位元素上奏效,元素可拥有负的z-index属性值

z- index 数值大的能够压住数值小的

用途

1. 压盖、遮罩效果
2. css精灵图
3. 结合 js 实现动画

固定定位

position:fixed

• 固定定位与绝对定位相似，但固定定位是相对于浏览器视口本身。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素
• 固定定位脱离标准文档流

用途

1. 返回顶部
2. 楼层导航

代码见： BOM 章节

粘性定位

position:sticky 粘性定位的几种巧妙应用

position: sticky;

在跨越特定阈值前（如视口顶部起 10 像素）为相对定位，之后为固定定位

 <h1>Sticky positioning</h1>

   <dl>
       <dt>A</dt>
       <dd>Apple</dd>
       <dd>Ant</dd>
       <dd>Altimeter</dd>
       <dd>Airplane</dd>
       <dt>B</dt>
       <dd>Bird</dd>
       <dd>Buzzard</dd>
       <dd>Bee</dd>
       <dd>Banana</dd>
       <dd>Beanstalk</dd>
       <dt>C</dt>
       <dd>Calculator</dd>
       <dd>Cane</dd>
       <dd>Camera</dd>
       <dd>Camel</dd>
       <dt>D</dt>
       <dd>Duck</dd>
       <dd>Dime</dd>
       <dd>Dipstick</dd>
       <dd>Drone</dd>
       <dt>E</dt>
       <dd>Egg</dd>
       <dd>Elephant</dd>
       <dd>Egret</dd>
   </dl>

    body {
        width: 500px;
        height: 1100px;
        margin: 0 auto;
      }

      dt {
          background-color: black;
          color: white;
          padding: 10px;
          position: sticky;
          top: 0;
          margin: 1em 0;
      }