清除浮动和元素居中

清除浮动的方法

• 加高法——给祖先元素一个高度
   浮动的元素只能被有高度的盒子关住，缺点：麻烦且不能适应页面的变化
• clear:both——写在要清除浮动的盒子上
   缺点：margin属性会失效
• overflow:hidden——写在浮动元素的父级上
   正常情况下，父级不会被浮动的子级撑出高度，但有了这个属性，父级可以被撑出高度，margin依然有效
• 隔墙法——在浮动元素之间放一个块级元素
   可放在浮动的盒子里面，这样它也能被撑出高度；或放在两个盒子之间，但这样浮动盒子没有高度

元素居中

//html结构
<div class="parent">
    <div class="child">dfdf</div>
 </div>

水平居中

宽度确定

//margin:0 auto
<div style="width:300px;height: 100px;border: 1px solid #f00;">
    <div style="width: 100px;height: 20px;background-color: #0f0;margin: 0 auto;"></div>
</div>

//position + margin + left
.parent {
      width: 400px;
      height: 100px;
      background: #bbb;
      position: relative;
    }
    .child {
      width: 200px;
      height: 100px;
      background: #333;
      position: absolute;
      left: 50%;
      margin-left: -100px;
    }

垂直居中

高度确定，适用于行级元素

//height + line-height
.parent {
      width: 400px;
      height: 200px;
      background: #bbb;
      line-height: 200px;
    }

水平垂直绝对居中

//1. position+ transform
.parent {
      width: 400px;
      height: 100px;
      background: #bbb;
      position: relative;
    }
    .child {
      width: 100px;
      height: 100px;
      background: #333;
      position: absolute;
      left: 50%;
      top:50%
      transform: translate(-50%,-50%);
    }

//2. 弹性布局
.parent {
      width: 400px;
      height: 200px;
      background: #bbb;
      display: flex;
      justify-content: center;
      align-items: center;
    }

//3. display + (text-align+inline-block) + vertical-align
.parent {
      width: 400px;
      height: 200px;
      background: #bbb;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }
    .child {
      width: 100px;
      height: 100px;
      background: #333;
      display: inline-block;
    }

//4. position + margin
.parent {
      width: 400px;
      height: 200px;
      background: #bbb;
      position: relative;
    }
    .child {
      width: 100px;
      height: 100px;
      background: #333;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
    }

auto：表示剩余空间自动分配。

块级元素在水平方向自动填充一整行，而在垂直方向上不会自动填充。
所以给块级元素设置margin:auto时，块级元素在水平方向上，左右的margin平分剩余空间，在垂直方向上，没有剩余空间可平分，所以呈现只有水平居中的效果

还可以利用auto达到一个浮动的效果

//类似于float:right
  width: 400px;
      height: 200px;
      background: #bbb;
      position: relative;
    }
    .child {
      width: 100px;
      height: 100px;
      background: #333;
      margin-left: auto;
    }