Position和Float的一些相关笔记

• float和postion都可以破坏文档流，当破坏文档流之后，发生的变化为：

1. 被设置该属性的元素A脱离文档流，那么对于A元素的上一个元素B，如果B也脱离了文档流，那么A会在B的后面，能排一行就排一行，排不了的话，A就在下一行。如果B没有脱离文档流，那么A的顶部和B的底部对齐。
2. 其它没有被设置该属性的元素C D E等则会补位。就是说A走了，下面一个不脱离文档流的元素就上来补到A的位置。
   
3. 对于设置了float属性的元素，可通过clear来清除横向排列的效果。换句话说，如果A B C D都设置了float：left属性，且都排在了同一排，而我不想让B C D和A在一排，我想让它们三个在第二排，那么我会设置B的clear属性为left. 什么意思呢？就是说“不允许B的左侧有浮动的对象”，这里的左侧是紧贴的左侧。

• position中的两个属性，relative和position。一开始我看这两个属性，并不了解其中的含义，总是会弄错。现在只需要记住，relative使得元素遵循正常的文档流（将依据top，right，bottom，left等属性在正常文档流中偏移位置），absolute使得元素脱离文档流，也是依据top，right，bottom，left等进行定位，但是要明白：

1. relative的参照定位对象是上一个文档流中的元素
2. absolute的参照定位对象是直接的父元素。
3. 所以absolute很少参与到文档流中，而是与带有relative属性的父元素配合，实现父元素内部的一些定位校准

补充一点，这是我在其他博客看到的：在用了position后, margin padding这些都会失效的, 因为这两个只有在display含有block 下才会生效的，并且absolute的父元素不会再根据其实子元素所需要的宽度和高度自动调节自身的宽高。

个人理解：其实依然可以使用margin:0来实现具有绝对定位元素的居中效果。

• 绝对定位元素的居中　

1. 方法：利用transform

.div{
position:absolute
left:50%
right:50%
transform:translate(-50%,-50%)
}

　　2. 方法：利用margin:auto

.div{
position:absolute;
left:0;top:0;right:0;bottom:0;
margin:auto