今天完成的事情：（之前对与水平居中，垂直居中一直不是很理解，今天又看了一次：

通过margin:auto和top,left,right,bottom都设置为0实现居中。

对于块状元素：将元素的display属性设置为inline-block，并且把父元素的text-align属性设置为center即可；对于行内元素：只需要把行内元素包裹在一个属性display为block的父层元素中，并且把父元素的text-align属性设置为center即可。

这里涉及到的inline-block,于是又了解inline-block:inline-block布局与浮动布局，对元素设置display：inline-block ，元素不会脱离文本流，而float就会使得元素脱离文本流，且还有父元素高度坍塌的效果。能在某程度上达到一样的效果。用了display:inline-block后，存在间隙问题，间隙为4像素，这个问题产生的原因是换行引起的，因为我们写标签时通常会在标签结束符后顺手打个回车，而回车会产生回车符，回车符相当于空白符，通常情况下，多个连续的空白符会合并成一个空白符，而产生“空白间隙”的真正原因就是这个让我们并不怎么注意的空白符。

去除空隙的方法：对父元素添加，{font-size:0}，即将字体大小设为0，那么那个空白符也变成0px，从而消除空隙,现在这种方法已经可以兼容各种浏览器，以前chrome浏览器是不兼容的.

为何要清除浮动？ 

要解答这个问题，我们得先说说CSS中的定位机制：普通流，浮动，绝对定位 （其中"position:fixed" 是 "position:absolute" 的一个子类）。 

1）普通流：很多人或者文章称之为文档流或者普通文档流，其实标准里根本就没有这个词。如果把文档流直译为英文就是 document flow ，但标准里只有另一个词，叫做 普通流 （normal flow)，或者称之为常规流。但似乎大家更习惯文档流的称呼，因为很多中文翻译的书就是这么来的。比如《CSS Mastery》，英文原书中至始至终都只有普通流 normal flow（普通流） 这一词，从来没出现过document flow （文档流） 

2）浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到 块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会 自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。 

正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。 

通过对比，我们不难发现，其实以上列举的方法，无非有两类： 

其一，通过在浮动元素的末尾添加一个空元素，设置 clear：both属性，after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素； 

其二，通过设置父元素 overflow 或者display：table 属性来闭合浮动

） 

明天计划的事情：（明天计划看些相关视频） 
遇到的问题：（对margin：auto用法原理不懂，经过百度了解到了·） 
收获：（了解了CSS居中的各种方法！clear：both的使用）