CSS布局之浮动(float)和定位(position)属性的区别


Posted in HTML / CSS onSeptember 25, 2021

CSS 布局 - position 属性

position 属性规定应用于元素的定位方法的类型(static、relative、fixed、absolute 或 sticky)。

position 属性

position 属性规定应用于元素的定位方法的类型。

有五个不同的位置值:

static
relative
fixed
absolute
sticky

元素其实是使用 top、bottom、left 和 right 属性定位的。但是,除非首先设置了 position 属性,否则这些属性将不起作用。根据不同的 position 值,它们的工作方式也不同。

CSS 布局 - 浮动和清除

float 属性
float 属性用于定位和格式化内容,例如让图像向左浮动到容器中的文本那里。

float 属性可以设置以下值之一:

left - 元素浮动到其容器的左侧
right - 元素浮动在其容器的右侧
none - 元素不会浮动(将显示在文本中刚出现的位置)。默认值。
inherit - 元素继承其父级的 float 值
最简单的用法是,float 属性可实现(报纸上)文字包围图片的效果。

float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动;display: inline-block 有些时候可以替代float实现相同的效果.

position: absolute|relative; 要配合top,left等定位;

使用:

position: absolute会导致元素脱离文档流,被定位的元素等于在文档中不占据任何位置,在另一个层呈现,可以设置z-index。PS的图层效果就是position: absolute。
float也会导致元素脱离文档流,但还在文档或容器中占据位置,把文档流和其它float元素向左或向右挤,并可能导致换行。图片的文字环绕布局效果就是float。
display的inline-block不脱离文档流,将block元素当作大型字符嵌入文档流内,类似于img或者input默认效果。

CSS布局浮动和定位属性的区别

CSS有三种基本的定位机制:普通流、浮动和绝对定位一、普通流 普通流中元素框的位置由元素在XHTML中的位置决定。块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。 普通流就是html文档中的元素如块级元素、行内元素依据他们的显示属性按照在文档

postion:relative是子块级元素面向父级元素的相对定位,定位关键字使用left/right/top/bottom。兄弟块元素之间相对进行定位,但是position移动后,原位置依然保留。而且随后的兄弟块元素定位基于被移走前的位置。

float:right/left是子块级元素流集合面向父级元素的定位,定位的关键词使用margin/padding。兄弟块元素之间进行相对的定位均基于移动后的新位置进行重新渲染,可以重叠,原位置被清空。

二者之中最大的差别就是位置保留。

人们也就利用这种差异,可以做出CSS代码的滑动门菜单。

三水点靠木小编补充

一般页面布局都是用float,但需要注意清除浮动,而一些特别的效果一般用positon,使用positon的元素可以在页面的任何位置出现,方便一些提示框,特效等。

具体的大家可以根据看到的页面F12,慢慢研究,就会发现有很多的乐趣、

 
HTML / CSS 相关文章推荐
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
Dec 30 HTML / CSS
实现CSS3中的border-radius(边框圆角)示例代码
Jul 19 HTML / CSS
纯CSS3制作漂亮带动画效果的主机价格表
Apr 25 HTML / CSS
CSS3模拟IOS滑动开关效果
Sep 28 HTML / CSS
CSS 3.0文字悬停跳动特效代码
Oct 26 HTML / CSS
HTML5的结构和语义(2):结构
Oct 17 HTML / CSS
html5使用canvas画空心圆与实心圆
Dec 15 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
Feb 19 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
Jun 27 HTML / CSS
Html5页面二次分享的实现
Jul 30 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
Mar 04 HTML / CSS
AmazeUI 缩略图的实现示例
Aug 18 HTML / CSS
Canvas绘制像素风图片的示例代码
Canvas如何做个雪花屏版404的实现
使用canvas对video视频某一刻截图功能
Sep 25 #HTML / CSS
使用CSS实现一个搜索引擎的原理解析
sass 常用备忘案例详解
Sep 15 #HTML / CSS
关于HTML编码导致的乱码问题
Sep 04 #HTML / CSS
使用CSS3实现按钮悬停闪烁动态特效代码
Aug 30 #HTML / CSS
You might like
用PHP中的 == 运算符进行字符串比较
2006/11/26 PHP
?算你??的 PHP 程式大小
2006/12/06 PHP
解析PHP计算页面执行时间的实现代码
2013/06/18 PHP
php中apc缓存使用示例
2013/12/25 PHP
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
2014/07/19 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
php7基于递归实现删除空文件夹的方法示例
2017/06/15 PHP
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
2014/06/30 Javascript
JavaScript操作cookie类实例
2015/03/31 Javascript
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
checkbox:click事件触发span元素内容改变的方法
2017/09/11 Javascript
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
小程序自定义模板实现吸顶功能
2020/01/08 Javascript
vue-resource post数据时碰到Django csrf问题的解决
2020/03/13 Javascript
详解React的回调渲染模式
2020/09/10 Javascript
python发送HTTP请求的方法小结
2015/07/08 Python
详解Python之unittest单元测试代码
2018/01/24 Python
pandas.DataFrame 根据条件新建列并赋值的方法
2018/04/08 Python
浅谈python中get pass用法
2019/03/19 Python
Flask配置Cors跨域的实现
2019/07/12 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
安全教育实施方案
2014/03/02 职场文书
《最佳路径》教学反思
2014/04/13 职场文书
怀念母亲教学反思
2014/04/28 职场文书
幼儿园师德师风学习材料
2014/05/29 职场文书
学习党的群众路线实践活动思想汇报
2014/09/12 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
用python实现监控视频人数统计
2021/05/21 Python