一、如何清除浮动

在使用div布局的时候，经常会使用到float来使元素浮动到需要的位置。使用浮动之后div就会脱离普通文档流，这个时候你如果没有设置div的高度的话就会产生高度塌陷的问题，而且有可能会导致兄弟元素出现排版混乱等问题。为了解决这些问题我们通常需要清除浮动:

1.使用clear属性清除浮动

(1).利用伪类清除浮动（常用）

(2).利用空标签清除浮动（会产生大量无用空标签不推荐）

2.触发BFC清除浮动

• 什么是BFC：
  Block Formatting Context(块级格式化上下文），指页面中一个独立的渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。 可以把它看作是一个独立的空间，这个空间内的元素怎样布局，不受空间外的元素影响。触发BFC后的元素： 1、内部“清场”：内部的浮动元素会被锁在内部，不会撑破父容器（解决高度塌陷）2、 边界“绝缘”：内部元素的垂直 margin 不会与外部元素重叠（解决边距合并） 3、 空间“霸占”：BFC 元素在浮动元素旁边时，不会环绕浮动元素，而是占据属于自己的独立空间（解决文字环绕/覆盖） 。

• 如何触发BFC：
  display: flow-root（专门为触发 BFC 而生，没有任何副作用）；
  overflow: hidden 、auto 、 scroll （最常用）；
  display: flex 、inline-flex、 grid （布局专用）；
  另外还有： display：table-cell、table-caption、 inline-block ； float ： left、right、inherit； position： fixed、absolute、inherit；这些都可以触发BFC，但是相对来说副作用会比较大一般不怎么专门用这几个来触发；
• BC可以解决什么问题
  1、清除内部浮动，解决“父容器高度塌陷”；可以清除浮动带来的副作比如浮动之后父容器高度塌陷问题；注意定位position造成的高度塌陷这里是不能解决的；
  2、防止垂直方向上的 margin 重叠（外边框合并问题）； 例如：盒子设置margin-top值无法发生效；两个兄弟盒子上 margin-bottom: 20px，下margin-top: 30px，实际间距只有 30px 而非 50px ；
  3、实现“自适应两栏/三栏布局”（左侧固定，右侧自动撑满）；例如：.left { float: left; width: 200px; } .right { overflow: hidden; } right就可以霸占当前行剩下的空间；
  4、阻止文字环绕浮动图片； 默认文字会环绕在浮动图片周围，若想让文字整齐地出现在图片下方或独立成块，给文字容器触发 BFC 即可

二、如何让元素水平垂直居中

1.行内元素居中

(1).让行内文字居中:text-align:center(水平居中)，line-height:height(垂直居中)

(2).让行内盒子居中：（这种方法垂直居中，需要有一个元素的高与父级元素高相同才行）

2.块级元素居中

(1).定位

3.flex居中

这里先看flex是如何实现水平垂直居中的

补充一下flex布局知识
　　Flex是Fexible Box 的缩写，就是"弹性布局" 。由于兼容行的问题(ie10+)，现阶段flex广泛用于移动端的布局，核心在于分配剩余空间和对齐 。给块级flex布局:display:flex;给行内元素flex布局:display:inline-flex;flex有两条轴方向,一个是主轴,一个是交叉轴(可以自定义主轴方向);flex 弹性机制 布局有父级的"容器"和子级的"项目"组成;"容器"和"项目"上分别由六个属性可以设置:

• 容器属性
  1. flex-direction (设置主轴方向)
     • row 默认值 主轴方向是水平 从左到右
     • row-reverse 主轴方向是水平 从右到右左
     • column 主轴方向是垂直 从上到下
     • column-reverse 主轴方向是垂直 从下到上
  2. flex-wrap (设置子项目是否换行显示)
     • nowrap 不换行
     • wrap 换行,第一行在上边
     • wrap-reverse 换行,第一行在下边
  3. flex-flow (是 flex-direction 和 flex-wrap 的缩写)
  4. justify-content (整个子项在主轴(水平)方向的对齐和分布方式)
     • flex-start 默认值 主轴起点(左对齐)
     • flex-end 主轴末尾(右对齐)
     • center 主轴中间(居中)
     • space-between 两端对齐,项目之间的间隔都相等
     • space-around 每个项目两侧的间隔相等;所以,项目之间的间隔比项目与边框的间隔大一倍
     • space-evenly 每一项间隔都相等,包括项目与边框之间的距离
  5. align-content (整个子项在交叉轴(垂直)方向上的对齐和布局方式,只有一条交叉轴时无效)
     • flex-start 与交叉轴的起点对齐 (上对齐)
     • flex-end 与交叉轴的终点对齐 (下对齐)
     • center 与交叉轴的中点对齐 (垂直对齐)
     • space-between 与交叉轴两端对齐，轴线之间的间隔平均分布
     • space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
     • stretch 默认值 轴线占满整个交叉轴
  6. align-items (每个子项在交叉轴(垂直)方向的对齐和分布方式)
     • flex-start 交叉轴的起点对齐(上对齐)
     • flex-end 交叉轴的终点对齐(下对齐)
     • center 交叉轴的中点对齐(垂直对齐)
     • baseline 项目的第一行文字的基线对齐
     • stretch 默认值 如果项目未设置高度或设为auto，将占满整个容器的高度

• 项目属性
  1. order (改变某个子项的排列位置;0默认位置, 数值越小,排列越靠前 )
  2. flex-grow (某个子项目的放大的比例,放大占用的是所有子项目的剩余空间;默认值是0,如果属性都为1,它们将等分剩余空间 )
  3. flex-shrink (某个子项目的收缩比例占用的也是剩余空间;默认值是1,设置0是不收缩,所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小)
  4. flex-basis ( 分配剩余空间之前元素的默认大小,默认是auto,可以设置width;一般不用,设置了width就不够弹性布局了)
  5. flex ( flex-grow, flex-shrink, flex-basis的缩写)
  6. align-self (某个子项目的垂直对齐方式,可覆盖父级的align-item;默认是auto,继承父级的对齐方式)
• flex常用的几个缩写及其含义 (flex: grow shrink basis;)
  1、flex: 1 ---> ( flex: 1 1 0%; ); 有多少空间就占多少，按比例平分;
  2、 flex: auto ---> flex: 1 1 auto; 在内容所占空间基础上，按比例伸缩 ;
  3、flex: none ---> flex: 0 0 auto; 不伸缩，由内容宽高决定
  4、flex: initial ---> flex: 0 1 auto; 不放大，但空间不够时可以缩

在Flex布局中，子项设置float,clear以及vertical-align属性都是没有用的 。flex布局是沿着轴线进行 一维布局方案 ,说到flex是一维布局方案，你肯定会想它有主轴和交叉轴为什么是一维布局呢？其实flex的交叉轴只是一个概念并不具备真正布局项目的能力：只有一个统一的对齐方式，不能操作每个项目布局和位置；真正二维布局方案是Grid，如果想要深入了解可以试试阮一峰Grid,以及Grid和Flex的区别；