CSS总结之易错易忘点

一，清除浮动；
二，设置margin:0 auto;后，元素仍不居中；

一， clear float
作为一个前端菜鸟，常常在为了让两个div水平排列，或者想让一些元素在其父元素框内靠左或靠右时，使用css float 属性。而又常常因为忘记 清除浮动 而导致看到自己做出来界面时，实力懵逼加不解，这才知道“样式表”也不是好惹的。
因为给元素设置了float属性之后，会自动生成块级框，不管元素本身是什么是何种元素；其次浮动框不会在文档的普通流中（从文档流中脱离，无法撑开父元素）。这也是为什么忘记清楚浮动会导致做出来的界面和预期不一样的原因。
经过各方参考了解了清楚浮动方法，主要是参考w3cplus 上的解决方案。
w3cplus Clear Float

1. clear:both;
   clear属性规定元素的哪一侧不允许其他浮动元素，而属性值both,表示在元素的左右两侧均不允许出现浮动元素。
   使用这种方法清除浮动的具体操作时，给浮动元素添加一个额外的兄弟元素div或者br，并定义样式为”clear: both”。

.clear {
     clear:both;
     /*兼容IE，不让ie具有一定的空间*/
     height: 0;
     line-height: 0;
     font-size: 0;
     }

　　一般来讲记住此方法的核心，clear:both;就可以了，但是作为前端应可能的处理浏览器兼容性问题，而且后面三个属性并不难理解，所以我每次都会写上。这种方法，有一个我觉得不完美的地方，就是添加了一个额外的元素只是为了清除浮动。

2.　overflow

.includeFloat {
overflow: auto;
zoom: 1;/*触发IE浏览器的haslayout，解决ie下的浮动*/
}

overflow属性指出如果内容溢出一个元素的框发生什么。其属性值，auto，hidden都可用来清除浮动，但前者据说对seo比较友好(前端好像老会提到这个SEO，打算之后写一篇来探究一下)。
在这里我第一次看到zoom属性，不明白是什么意思，一番网上冲浪之后，我了解到这是一个ie专有的属性，用来解决一些，ie兼容性问题。
关于zoom，传送门
上面的清除浮动据说还可以，这样写:

.includeFloat {
    o\verflow: auto;/*仅ie6以下不识别*/
    }
* html .includeFloat {
    height: 1%;/*ie5-6*/
    }

3.　clearfix
这种方法据说是目前最拉风的一种清除浮动方法，我认为主要是因为此方法用到了css伪类。

.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix: after {
    clear: both;
}
.clearfix {
    /*ie<8*/
    zoom: 1;
}

这种方法的原理和第一种clear:both;一样。
上面这种方法有个优化升级版本，也是我现在在使用的：

.clearfix:before,
.clearfix:after {
    content: "";
    dispaly: table;
}
.clearfix:after {
    clear: both;
    overflow: hidden;
}
.clearfix {
    zoom: 1;
}

这段代码我每次 在重置css的时候就会写上了，一来是怕自己忘记了，二来是在需要清除浮动的时候，直接添加一个clearfix类名就可以了，不需要再去写css代码了。

二，设置margin:0 auto;后，元素仍不居中
设置margin:0 auto;后，元素仍不居中原因应该是忘记给元素设置width值，
刚开始使用css时，发现给一个元素设置其左右外边距值为auto时，居然可以让元素居中，也是欣喜了好一阵，毕竟刚开始时，感觉什么让元素水平，垂直居中，分分钟让我生无可恋。（传送门　大神带我玩转居中）但是使用这个属性时，我老是忘记设置元素的width值，而且往往不想给元素一个固定的宽度，所以也就看不到居中的效果。

好啦，这次先记录到这，see you next time!

如有错误，请多指教。