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。