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属性实现炫酷读者墙效果
Jan 08 HTML / CSS
CSS3感应鼠标的背景闪烁和图片缩放动画效果
May 14 HTML / CSS
css3的transition属性详解
Dec 15 HTML / CSS
使用CSS3的ruby-position固定注音位置的用法示例
Jul 05 HTML / CSS
CSS Houdini实现动态波浪纹效果
Jul 30 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 HTML / CSS
HTML5中的postMessage API基本使用教程
May 20 HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
Jul 10 HTML / CSS
html5 offlline 缓存使用示例
Jun 24 HTML / CSS
简单介绍HTML5中的文件导入
May 08 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
Feb 22 HTML / CSS
HTML5在线预览PDF的示例代码
Sep 14 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静态类的原罪详解
2013/05/06 PHP
PHP基于Redis消息队列实现发布微博的方法
2017/05/03 PHP
设定php简写功能的方法
2019/11/28 PHP
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
Javascript 汉字字节判断
2009/08/01 Javascript
javascript 面向对象全新理练之继承与多态
2009/12/03 Javascript
window.location.hash 使用说明
2010/11/08 Javascript
js中查找最近的共有祖先元素的实现代码
2010/12/30 Javascript
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
点评js异步加载的4种方式
2015/12/22 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
关于javascript作用域的常见面试题分享
2017/06/18 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
Jquery cookie插件实现原理代码解析
2020/08/04 jQuery
Python3的介绍、安装和命令行的认识(推荐)
2018/10/20 Python
PyTorch的深度学习入门教程之构建神经网络
2019/06/27 Python
python连接打印机实现打印文档、图片、pdf文件等功能
2020/02/07 Python
用python写爬虫简单吗
2020/07/28 Python
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
党的群众路线教育实践活动批评与自我批评
2014/02/16 职场文书
企业文化宣传标语
2014/06/09 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
2014年房产经纪人工作总结
2014/12/08 职场文书
2015年党员个人自我评价
2015/03/03 职场文书
银行稽核岗位职责
2015/04/13 职场文书
贷款工资证明范本
2015/06/12 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
微软Win11有哪些隐藏功能? windows11多个功能汇总
2021/11/21 数码科技