css浮动
css中一共有三种手段，使一个元素脱离标准文档流：
（1）浮动
（2）绝对定位
（3）固定定位
一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。
所有标签，浮动之后，已经不区分行内、块级了。
清除浮动
方法1：给浮动元素的祖先元素加高度
如果一个元素要浮动，那么它的祖先元素一定要有高度。
有高度的盒子，才能关住浮动。（记住这句过来人的经验之语）
只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。
方法2：clear:both;
clear就是清除，both指的是左浮动、右浮动都要清除。clear:both的意思就是：不允许左侧和右侧有浮动对象。
这种方法有一个非常大的、致命的问题，它所在的标签，margin属性失效了。
方法3：隔墙法
了防止第二个div贴靠到第二个div，我们可以在这两个div中间用一个新的div隔开，然后给这个新的div设置clear: both;属性
内墙法：
为了讲内墙法，先记住一句重要的话：一个父亲是不能被浮动的儿子撑出高度的。
与外墙法相比，内墙法的优势（本质区别）在于：内墙法可以给它所在的家撑出宽度（让box1有高）。
即：box1的高度可以自适应内容
方法4：overflow:hidden;
一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。
相对定位：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。
相对定位：不脱标，老家留坑，别人不会把它的位置挤走。
绝对定位：定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示。
绝对定位的盒子脱离了标准文档流。
**z-index属性： **
z-index属性：表示谁压着谁。数值大的压盖住数值小的。
（1）属性值大的位于上层，属性值小的位于下层。
（2）z-index值没有单位，就是一个正整数。默认的z-index值是0。
（3）如果大家都没有z-index值，或者z-index值一样，那么在HTML代码里写在后面，谁就在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。
（4）只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的元素不能用。
（5）从父现象：父亲怂了，儿子再牛逼也没用。意思是，如果父亲1比父亲2大，那么，即使儿子1比儿子2小，儿子1也能在最上层。