位置和浮动之间的区别
只有position才是定位,float不能说是定位,不过你可以说这两种布局方式有什么不同。float和position这两者并没有孰好孰不好的问题,两者按需使用,各得所需的效果。
float从字面上的意思就是浮动,float能让元素从文档流中抽出,它并不占文档流的空间,典型的就是图文混排中文字环绕图片的效果了。并且float这也是目前使用最多的网页布局方式。不过需要注意的是清除浮动是你可能需要注意的地方。并且如果你要考虑到IE6兼容问题。
而position顾名思义就是定位。他有以下这几种属性:static(默认),relative(相对定位),absolute(绝对定位)和fixed(固定定位)。其中static和relative会占据文档流空间,他们并不是脱离文档的。absolute和fixed是脱离文档流的,不会占据文档流空间。
比较可以发现,float和position最大的区别其实是是否占据文档流空间的问题。虽然position有absolute和fixed这两个同样不会占据文档流的属性,但是这两个并不适合被用来给整个网页做布局。为什么?因为这样你就得为页面上的每一个元素设置一个xy坐标来定位。
float布局就显得灵活多了。但是一些特殊的地方搭配relative和absolute布局可以实现更好的效果。因为absolute是基于父级元素的定位,当父级元素是relative的时候,absolute的元素就会是基于它的定位了。比如你可以让一个按钮始终显示在一个元素的右下角。
总结一句就是不推荐用position来布局整个页面的大框架,而推荐用float或者文档流的默认方式。
上一篇: 位置有哪些常用值?它有什么作用?
下一篇: css - 定位 定位属性和层次关系
推荐阅读
-
C++ 中库和包的区别
-
vue 中哈希模式和历史模式的区别 - IV 小结
-
面试问题 - 请告诉我们 rpc 和 http 的区别,以及 http 能否取代 kafka。
-
linux 中软链接和硬链接的区别
-
cv2.imshow 和 plt.imshow 的区别
-
[C++ 核心编程] 注释 4.1.2 结构和类的区别
-
力扣 1884.Egg Drop Two Egg(两个鸡蛋掉落) - 输入: n = 100 输出: 1414 解说 最佳策略是 - 从 9 楼扔下第一个鸡蛋。如果蛋碎了,那么 f 在 0 和 8 之间。从第 1 层扔第 2 个鸡蛋,然后每扔 1 层,分 8 次找到 f。总操作次数 = 1 + 8 = 9。 - 如果第一个鸡蛋没有破,那么从 22 楼扔第一个鸡蛋。如果蛋碎了,那么 f 介于 9 和 21 之间。将第二个鸡蛋从 10 楼往下扔,然后每扔一次往上扔一层楼,在 12 次尝试中找出 f。总操作次数 = 2 + 12 = 14。 - 如果第一个鸡蛋没有再次破碎,那么用类似的方法从 34、45、55、64、72、79、85、90、94、97、99 和 100 层扔第一个鸡蛋。 无论结果如何,最多需要扔 14 次才能确定 f。 一个非常有趣的问题 方法 1:动态编程
-
基于协作过滤的风景游览可视化和景点推荐系统(自动爬虫,位置可变)
-
Solon-Boot 和 SpringBoot 在概念上的区别
-
python 的迭代器和生成器有什么区别?