元素水平垂直居中方法 + 清除浮动

实现元素水平垂直居中的方法

1.定位方法1

/* 子绝父相+上下左右都为0，然后margin： auto; */
position： absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;

2.定位方法2

position: absolute;
left: 50%;
top: 50%;

/* 在这里使用平移 */
/* 平移50% 效果是平移元素自身大小的50% */
transform: translate(-50%,-50%);

/* margin值也可以，不过要设定具体大小 */

3.弹性盒

弹性盒只适用于移动端布局

/* 父元素转化为弹性盒子 */
display: flex;

/* 主轴居中，交叉轴居中 */
justify-content: center;
align-items: center;

4.将子元素div转成行内块

将子元素div转换成行内块元素
dispaly: inline-block;

在子元素后面加一个span标签
/* vertical-align修饰行内块 */
vertical-align: middle;

给父盒子设置
line-height
text-align: center;

5.网格布局1

父元素设置成网格布局，划分为九宫格

指定需要水平垂直居中的元素到中间位置

6.网格布局2

需要水平垂直居中的元素，设置成网格布局

设置水平对齐
justify-content:center;

设置垂直对齐
align-content:center;

浮动

float: left/right/none;

1.一行内显示且顶部对齐；

2.可以赋予宽高；

3.浮动元素脱离标准流；

4.父元素没有高度，会对后面的标准流元素造成影响，需要清除浮动

清除浮动

清除浮动带来的影响（使用浮动接着要记得清除浮动）

/* 核心语法 */
clear: both;

常用的清除浮动的方法

1. 给受到浮动影响的元素添加 overflow: hidden;

原理：因为overflow属性会触发BFC（block formatting context）块级格式化上下文，让元素强制按照块元素的规则进行排列

overflow: hidden;本意是将父元素中溢出的内容裁切掉，而BFC中，在计算父元素真实高度时候，也把float元素的高度算入其中，所以在计算裁切的同时，顺带达成了清除浮动的目的

overflow: hidden;

2. 在受到浮动影响的元素前面添加一个空div，给空div添加样式clear: both;

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度

缺点：会额外增加很多无意义的结构，最好是加在样式里，不要在结构里

.clearfix {
   clear: both;
    
   /*  height:0;
       overflow:hidden; */
}

3. 伪元素清除浮动：给浮动元素的父元素添加伪元素选择器

原理：伪元素在后面创建一个内容为空的盒子，闭合浮动，并使其隐藏

div::after {
   /* 伪元素必须属性 */
   content: '';
   display: block;
   clear: both;
}

或者

.clearBoth:after {
      content: ""; 
      display: block; 
      height: 0; 
      clear: both; 
      visibility: hidden;
}   
.clearBoth {
  /* 解决IE的浮动问题 zoom(IE专有属性)可解决ie6,ie7浮动问题 */
  *zoom: 1;
}

4. 父级div定义 height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
建议：不推荐使用，只建议高度固定的布局时使用