css重要知识点

1.float:left;表示靠左显示。它是相对于距离最近的且以relative作为position的父元素而言的。

2.块级元素和行内元素

块级元素：占据了一个矩形框的元素，display属性的值为block，可通过设置width，height，padding, margin等属性来确定矩形的大小，

内联元素：没有自己的独立空间，display的值为inline，依附于块级元素而存在，对其设置width，height，padding是无效的。

常用的块级元素：div,h1,p,ul,table等

常用的内联（行内）元素：a,b,strong,span，i等。

当display设为none的时候，将没有框，也就是这个元素不占据任何空间。

3.消除浮动的影响

如果一个元素A的子级元素使用了浮动，那么它的这些子级元素是不占有高度的，所以它自己也不占高度，所以元素A的兄弟元素会挤占A本来在的地方（因为A此时高度为0）。为了消除这种影响，我们需要在A元素中那些浮动元素的后面放上一个非浮动的元素B。并且给B元素增加属性 clear:both；

这个过程可以转化为如下css.

.clearfix:before, .clearfix:after {
  content: '';
  display: block;
  clear: both;
}

然后我们给A元素设置clearfix的class属性就可以了。要设置为display为block是因为只有block的元素才能占据空间。如果不设置的话，伪元素默认与父元素（A元素）的类型一样。如果A是ul这类的元素，就不会起到效果了，所以我们一般都是设置display为block。