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

css定位、position与float同时使用的情况相关推荐

CSS定位布局display/float/position属性之间的关系/区别和如何使用取值行为机制
float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动; display: inline-block; 有些时候可以替代float实现相同的效果. positio ...
CSS定位position总结（超详细哦！）
文章目录前言一.定位(position) 介绍 1.为什么使用定位 2.定位组成二. 定位模式 (position) 1.边偏移(方位名词) 2.定位模式介绍 1.1 静态定位(static) ...
CSS——CSS定位※ ( position )
文章目录定位(position) 为什么要用定位? 元素的定位属性静态定位(static) 相对定位relative(自恋型) 绝对定位absolute (拼爹型) 1.父级没有定位 2.父级有定 ...
前端基础入门之css定位 position
定位的简介需求分析按照我们之前所学知识,可以怎么实现呢? 应该来说不难,很容易实现 .box2 {width: 200px;height: 200px;background-color: yell ...
css定位position
闲言碎语不多说,直接开写! 关于定位我们可以使用css的position属性来设置元素定位类型,position的设置项如下: a.relative生成相对定位元素,元素所占据的文档流的位置不变(即 ...
css 定位position详解,background注意事项哒哒哒 -----20181119
1.定位position:relative || absolute || fixed生成绝对定位的元素,相对于浏览器窗口进行定位.|| inherit (1)属性解释 ①````position ...
CSS定位 position
position: 元素的定位方式,取值 staic.fixed.relative.absolute static:静态定位(默认状态.不定位) Fixed:固定定位 relative:相对定位 ab ...
css 定位position: absolute居中
这是个很小的点:只是为了方便使用 /*方式一*/ .main_center{position: absolute;left:0;right:0;top:0;bottom:0;margin:auto; ...
css绝对定位分层,css定位position引发的层级关系问题详解
position定位里的absolute,relative和fixed absolue:绝对定位,用top,bottom,left和right根据有定位的父级元素进行定位,如果无则相对body元素即整 ...
CSS定位—position：fixed
position:fixed 固定定位,被固定在浏览器的某个地方,被固定的元素不会随着滚动条的拖动而改变位置需要结合top.bottom.left.right四个维度来定位位置,如果没设置,则原来位 ...

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

css定位、position与float同时使用的情况相关推荐

最新文章

热门文章