浮动

我们直接来看代码和图

一

二

child1左浮，脱离文档流，相当于浮起来了，它底下那块地就空出来了，所以child2就补上去了，但是由于他俩大小一样，完全遮盖住，所以看着的效果就是只有child1了。

三

如果两个都是同一边的浮动，就会变成一行，常用这种方法去把块级元素放在同一行

四

你可以发现，父级的高度本来是靠子级往大撑的，结果现在子级都浮动了，两个自己都脱离文档流，父级高度成了0了(不是没有了，是高度为0了)，这就叫高度塌陷，有四种方法消除掉

Ⅰ.在浮动元素的后面加一个空的div标签专门用来消除浮动

Ⅱ. ::after

它相当于在父元素的最后面添加了一个行元素，如果需要内容为空，就写''，一定要写

但是这种有一个缺点，就是有一个父元素需要消除浮动，就得写一遍，所以有了第三种

Ⅲ.

谁想清除浮动，谁的类属性就加一个clearfix，这样就简单多了

四

overflow: hidden本意是溢出隐藏，但是用在这里可以消除浮动

定位

相对定位relative

先说一句题外话

    
    

    

    

         
1
         
2
         
3
    

 

这是因为行级元素是不能设置宽高的，只能由内容去撑大，你设置的width: 100px;height: 100px;是无效的，所以要用display: inline-block;用了以后，两两之间会有一条缝隙，上图也是，只需把div放在一行，它们就紧紧的挨在一起了。

    
    

    

    

         
1
2
3
    

 

相对定位：

    
    

    

    

         
1
2
3
    

 

可以看出他是相对于自己原来的位置变了，并且，虽然移动走了，但是它的空间是不释放的，也就是说，它虽然移动走了，但是后面的内容不能补上来

绝对定位absolute

    
    

    

    

         
1
2
3
    

 

可以看出absolute移走后会释放空间，后面的内容可以补上来，并且，绝对定位的元素的位置是相对于body的。，这里其实说的还不完全对，在后面的总结里会说。

固定定位fixed

    
    
    


    
我是广告

 

不管滚动条怎么移动，它都会在一个地方不动，并且会释放空间。

总结

相对定位relative

1.相对于自己的初始位置

2.定位后空间不释放

绝对定位absolute

1.位置相对于最近的、已定位的祖先元素，如果没有最近的、已定位的祖先元素，就相对于body

2.定位后释放空间

固定定位fixed

1.位置相对于可视页面

2.定位后释放空间