css定位、position与float同时使用的情况

　　一、css定位

　　　　CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

　　　　　　1.普通流：未专门指定的元素都在普通流中定位，position:static/relative;和float:none;也在普通流中定位。

　　　　　　2.绝对定位：position:absolute/fixed;元素框脱离普通文档流。　　

　　　　　　3.浮动：float:left/right;元素脱离普通文档流。

 

　　二、对元素同时使用position和float的情况

　　　　经过实践发现，无论position和float谁写在前面或后面，都是position先起作用。

　　　　　　1.当position为absolute/fixed时，元素已脱离文档流，再对元素应用float失效（即不起作用）。

　　　　　　2.当position为static/relative时，元素依旧处于普通流中，再对元素应用float起作用。

　　

　　三、css定位机制之绝对定位机制与浮动定位机制的区别

　　　　1.用position使元素脱离普通流后，该元素不占据空间，用top/bottom/left/right决定位置。

　　　　2.用float使元素脱离普通流后，该元素占据空间，用margin,padding等决定和周围内容的距离等。

 

　　（该文供学习交流，欢迎大家共同探讨~）

 

转载于:https://www.cnblogs.com/snowcan/p/6897951.html