黑马程序员技术交流社区

标题: 浮动与定位的使用区别 [打印本页]
作者: 树子未    时间: 2018-6-12 00:19
标题: 浮动与定位的使用区别
这里只谈论float和position常用的值
        
        从上图可以看出浮动一当使用就会脱离文档流，何为脱离文档流，就是能让2个div(块级元素能在同一行显示)
      
左边图是正常的情况下一个父div包含两个字div,     右图就是两个div同时使用了浮动
（注意1想两个或者多个div同行时必须每个都要使用浮动，哪怕少一个都不行）
（注意2浮动一当使用就会把这个使用的浮动元素变成块级元素）
（注意3元素浮动后就不再占位置，想要元素占位置就必须清除浮动）
浮动通常使用在左右中分离明显而且有规律的地方


   定位分两种relative和absolute
   relative: 没有脱离文档流，占位置，支持使用top、left、right、bottom。位置以自身标准流的位置开始算.

橙色left: 200px;top: 0   
absolute:  脱离文档流，不占位置，支持使用top、left、right、bottom。位置以比自己高级并且有relative的元素左上角开始算。
   
橙色left: 200px;top: 0  

由于定位能很方便的随意将元素调到自己喜欢的位置，所以定位一般用于调位置到一些特殊的地方






欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2