码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-05-24 12:40:45      阅读:211      评论:0      收藏:0      [点我收藏+]

标签:float   css   实践   add   绝对定位   距离   tom   应用   bsp   

  一、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等决定和周围内容的距离等。

 

  (该文供学习交流,欢迎大家共同探讨~)

 

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

标签:float   css   实践   add   绝对定位   距离   tom   应用   bsp   

原文地址:http://www.cnblogs.com/snowcan/p/6897951.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!