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的transform做的动态时钟效果
Sep 21 HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 HTML / CSS
CSS实现雨滴动画效果的实例代码
Oct 08 HTML / CSS
CSS3实现缺角矩形,折角矩形以及缺角边框
Dec 20 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
Apr 26 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
Apr 23 HTML / CSS
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
Nov 05 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
Mar 14 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
Feb 25 HTML / CSS
HTML5页面音频自动播放的实现方式
Jun 21 HTML / CSS
CSS+HTML 实现顶部导航栏功能
Aug 30 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
日本十大惊悚动漫
2020/03/04 日漫
PHP 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
PHP与MongoDB简介|安全|M+PHP应用实例详解
2013/06/17 PHP
php常量详细解析
2015/10/27 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
PHP实现git部署的方法教程
2017/12/19 PHP
Javascript中Eval函数的使用
2010/03/23 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
2011/11/14 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
2017/05/11 Javascript
详解Vue项目部署遇到的问题及解决方案
2019/01/11 Javascript
vue项目前端知识点整理【收藏】
2019/05/13 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
2020/02/11 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
Php多进程实现代码
2018/05/07 Python
在Python 字典中一键对应多个值的实例
2019/02/03 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
Django和Flask框架优缺点对比
2019/10/24 Python
django框架F&Q 聚合与分组操作示例
2019/12/12 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
python使用scapy模块实现ping扫描的过程详解
2021/01/21 Python
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
几道PHP面试题
2013/04/14 面试题
Linux的文件类型
2016/07/05 面试题
运动会广播稿20字
2014/02/18 职场文书
《陋室铭》教学反思
2014/02/26 职场文书
我爱祖国演讲稿
2014/09/02 职场文书
常务副总经理岗位职责
2015/02/02 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
如何自己动手写SQL执行引擎
2021/06/02 MySQL
WebRTC记录音视频流(web技术分享)
2022/02/24 Javascript
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis