float和position总结

浮动和定位之前一直感觉是HTML和css这个科目里面的重点和难点所在。昨天听了这两章的课程录播，感觉也没有那么难理解。

浮动，有left和right属性，很实用，用起来很简便，对于布局。脱离文档流，浮动半层，后面未设置浮动样式的盒子都会顶上去占据浮动元素本来的位置，只是文字和图片的话，不会被覆盖，还是会被挤出来显示。

然后就是一排浮动元素并排显示，因为父级总宽度不够会发生的一些被挤下来的情况。

然后和float样式同样重要的是clear样式，清除浮动。清除浮动，就是让浮动元素依旧占有着相应的布局位置，不让下方元素都往上顶，同时它还享受浮动带来的功能。（没见过这么便宜的事。。）

这里应该有两种情况，一种就是课堂上说的，父级包裹着子级，父级没有设置高度，指望着子级的高度撑开父级的高度，这样子更灵活一点，于是当子级float时，所有子级都脱离了文档流，就出现了父级的高度没有子级元素去撑开的情况，于是就出现了父级高度塌陷。于是就要清除子级元素的浮动，解决方式就是给父级添加一个clear的class名，

.clear::after{content:"";display:block;clear:both;}

这样子就是显得在父级里面所有子级后面又增加了一个子元素，这个子元素去清除它前面兄弟元素的浮动，让前面的浮动元素还占据相应的文档流，于是父级高度就被这个文档流撑起来了。

另一种，不是父级包裹子级的情况，就是前面几个浮动了，然后下面的非浮动元素顶上去了，这个解决起来简单，直接给下面这个非浮动元素加一个样式clear：both就可以了。

说到定位，三个属性，relative，absolute，fixed，还有一个static是默认值，就是没有定位。

四个位置的偏移属性，top，bottom，left，right。一般属性值是写具体的px数值。

relative，相对于元素本身位置的偏移，依然占据文档流，并没有脱离。

absolute，是相对于最近的定位父级元素的位置偏移，所以一般给他的父级也加一个position：relative样式。absolute是脱离文档流的，后面的元素会顶上去，这个并没有教什么清除的方法了。

然后就是层级属性，z-index，只有定位元素设置这个属性才有效，数值越大，越在上面，默认值都是0，然后后面的元素默认显示在上面，要注意的一种情况，子级一般是在父级上面显示的，这时候如果把父级的z-index值调的很大，会发现子级还是在父级上面显示，因为子级水涨船高了，所以正确的方法是把自己的z-index值写的小一点，负值，那么它就被父级遮住了。

然后是定位元素居中，水平和垂直方向同时居中的样式怎么写。