前端题01 清除浮动，垂直居中

清除浮动

当为 子元素 添加浮动 float 时，会发生 浮动塌陷 。
对 子元素 设置浮动后，子元素会脱离文档流，这个时候 包含块 即父元素 没有设置高度 或者 高度自适应 的时候，此时 浮动元素的高度 就不会被计算进去，相当于没有可以展开的内容，包含块高度不能撑起来，形成 塌陷 状态。
由于 不知道会添加多少子元素，直接设置包含块的高度是不可取的，不利于维护。

清除浮动的方式

1. clear：在 父元素 内最底下 创建一个空元素[ 块级元素 ]，在css样式中，设置该空元素 clear: both; 此时空元素两边不与浮动元素共存，这样就可以使父元素重新自动获取高度了。
   缺点：会产生大量的空元素，浪费资源。

2. BFC：开启BFC有两种方式：overflow 和 设置浮动
   —— 父元素css样式中设置 overflow: hidden; 或 overflow: auto; 设置后，会规定内容溢出于元素框的时候发生的情况。加了overflow会把 浮动流的元素高度 计算后，再把多余的内容处理了。
   —— 设置父元素浮动 float 。缺点：会影响布局。

3. 伪元素：相当于给文档添加了一个虚拟的元素，这个虚拟元素可以指定添加到 被指定元素 的前面或者后面。
   ——为父元素（包含块）添加伪元素。（类似第一点）
   .clearfix::after { content: ""; display: block; clear: both; }

垂直居中

1. padding：用于父元素 没有设置高度 或者 高度自适应，父元素 设置上下内边距(以按钮为例，内边距控制 边框 到 文本 之间的距离，而且可以使背景延伸，用内边距控制按钮大小)
   padding-top:
   padding-bottom:
   ——优点：简单，只需要设置上下内边距。
   ——缺点：父元素不能设置固定高度。

2. line-height：指基线之间的距离。 line-height 与 font-size 之差可以得到行距，行距就是文字顶部和底部的空间。子元素 设置line-height与 父元素高度相等 ，相当于把子元素高度撑开，可以使 文字居中，但是无法用于多行文字。
   ——优点：允许父元素设置固定高度。
   ——缺点：一般用于单行文字，不适合多行

3. flexbox 弹性布局：解决 固定高度和多行文字居中问题。
   父元素{
   height: 200px;
   width: 150px;
   display: flex;
   flex-direction: column;方向从上到下排列
   justify-content: center;中间对齐
   }
   ——优点：简单易懂。
   ——缺点：兼容性问题，ie9以上才兼容。

4. table：以列表标签制作的导航栏为例，导航栏需要设置横排显示，还需要考虑垂直居中，可以一次性用table解决。
   父元素{
   display: table;
   }
   子元素{
   display: table-cell;
   vertical-align: middle;
   }
   ——优点：简单。
   ——缺点：副作用。缺点较多，如果不是作表格，一般少用。

5. grid 栅格布局：解决table缺点。以导航栏为例
   父元素{
   display: grid;
   grid-template-columns: repeat( 6子元素个数，1fr); 等份排列
   justify-content: center;居中
   }
   flex 和 grid 都很适合用来布局，不过导航栏用flex比较好，grid 比较适合 多行多列 布局
   ——优点：强大。
   ——缺点：兼容性问题，上手难。

6. absolute：绝对定位，
   父元素{
   position: relative;
   }
   子元素{
   width:xxpx;
   height:xxpx;
   position: absolute;
   top:50%;
   transform: translateY( -50%);
   }
   top:50%; 相对于父元素向下偏移50%
   translateY( -50%); 由于top偏移是 子元素顶部 相对于父元素顶部的偏移，因此 实际位置 往下多出子元素50%，所以需要把元素的50%向上挪动。
   如果知道元素高度，也可以用margin-top向上偏移元素50%，只是需要进行简单计算。
   ——优点：简单易懂。
   ——缺点：脱离文档流。

7. 伪元素：以搜索框(含input输入框和div点击按钮)为例，在父元素中使搜索框垂直居中。当以上居中方式不适合时，比如由于兼容性问题不可使用时，可以用这种方式。
   搜索框{
   display: inline-block;
   vertical-align: middle;
   }
   此时 vertical-align 并没有生效，这是因为 它 不能影响块级元素中文本的对齐方式，但是可以控制单元格中元素的垂直方向的对齐方式，简单来说，这个搜索框在父元素这一行里，就相当于独立的文本，没有其它 单元格 可以做对比。
   我们可以创建一个span元素 作为 搜索框的 兄弟元素
   span{
   display: inline-block;
   height: 父元素高度;
   width:任意值，但是为了不影响布局，设置0px;
   vertical-align:middle;
   }
   此时 搜索框 依据新元素span进行对齐，那是因为span元素的高度在这一行里是最大的，这一行的对齐就需要依据它来。
   span的vertical-align是使span的中线与父元素的基线 向上偏移。
   但是，此时多了一个元素，因此可以用伪元素代替。
   父元素::after{
   content:’’;
   display: inline-block;
   width: 0px;
   height: 父元素高度;
   vertical-align: middle;
   }
   ——优点：兼容性好。
   ——确定：不好理解。