float和position谁好?
2024-10-13 02:45:50
float从字面上的意思就是浮动,float能让元素从文档流中抽出,它并不占文档流的空间,典型的就是图文混排中文字环绕图片的效果了。不过需要注意的是清除浮动是我们可能需要注意的地方。
而position顾名思义就是定位。他有以下这几种属性:static(默认),relative(相对定位),absolute(绝对定位)和fixed(固定定位)。其中static和relative会占据文档流空间,他们并不是脱离文档的。absolute和fixed是脱离文档流的,不会占据文档流空间。
比较可以发现,float和position最大的区别其实是是否占据文档流空间的问题。虽然position有absolute和fixed这两个同样不会占据文档流的属性,但是这两个并不适合被用来给整个网页做布局。因为这样我们得为页面上的每一个元素设置左右和上下定位。
float布局就显得灵活多了。但是一些特殊的地方搭配relative和absolute布局可以实现更好的效果。因为absolute是基于父级元素的定位,当父级元素是relative的时候,absolute的元素就会是基于它的定位了。比如可以让一个按钮始终显示在一个元素的右下角。
总结一句就是不推荐用position来布局整个页面的大框架,而推荐用float或者文档流的默认方式。
而position顾名思义就是定位。他有以下这几种属性:static(默认),relative(相对定位),absolute(绝对定位)和fixed(固定定位)。其中static和relative会占据文档流空间,他们并不是脱离文档的。absolute和fixed是脱离文档流的,不会占据文档流空间。
比较可以发现,float和position最大的区别其实是是否占据文档流空间的问题。虽然position有absolute和fixed这两个同样不会占据文档流的属性,但是这两个并不适合被用来给整个网页做布局。因为这样我们得为页面上的每一个元素设置左右和上下定位。
float布局就显得灵活多了。但是一些特殊的地方搭配relative和absolute布局可以实现更好的效果。因为absolute是基于父级元素的定位,当父级元素是relative的时候,absolute的元素就会是基于它的定位了。比如可以让一个按钮始终显示在一个元素的右下角。
总结一句就是不推荐用position来布局整个页面的大框架,而推荐用float或者文档流的默认方式。
所以并没有谁更好,两者按需使用,就能各得所需的效果。
最新文章
- Best Time to Buy and Sell Stock1,2,3,4
- Logging configuration
- Fragment全解析系列(一):那些年踩过的坑
- spring mvc使用@InitBinder 标签对表单数据绑定
- django--模板(七)
- ACM/ICPC 之 优先级队列+设置IO缓存区(TSH OJ-Schedule(任务调度))
- 黑马程序员_JAVA之银行业务调度系统
- catalog、scheme区别
- JS 数组的基础知识
- 2014年辛星Javascript解读第四节 流程控制语句
- 笔记整理--Linux编程
- 蓝桥杯算法训练_2的次幂表示+前缀表达式+Anagrams问题+出现次数最多的整数
- Java生产者消费者
- springboot集成mybatis(二)
- Java 静态内部类注意点
- ant在windows及linux环境下安装
- filter 过滤器的基本使用
- [Codeforces771E]Bear and Rectangle Strips
- Oracle11.2.0.1 升级Oracle11.2.0.4 后 listener 的端口改变需要处理
- Shell - 简明Shell入门06 - 循环语句(Loop)