咨询电话:
15628812133
23
2017/02

在 CSS 中,用 float 和 position 这两种布局方式有什么不同?

发布时间:2017-02-23 08:51:28
发布者:jiangbing
浏览量:
0

其实float最初是用来调节包围文字的,position是用来调节文档流中位置的,  float和position这两者并没有孰好孰不好的问题,两者按需使用,各得所需的效果。

float从字面上的意思就是浮动。float能让元素从文档流中抽出,它并不占文档流的空间,典型的就是图文混排中文字环绕图片的效果了。并且float这也是目前使用最多的网页布局方式。不过需要注意的是清除浮动是你可能需要注意的地方。并且如果你要考虑到古老的IE6之类的还会有一些bug诸如双边距等等问题。


而position顾名思义就是定位。他有以下这几种属性:static(默认),relative(相对定位),absolute(绝对定位)和fixed(固定定位)。其中static和relative会占据文档流空间,他们并不是脱离文档的。absolute和fixed是脱离文档流的,不会占据文档流空间。

比较可以发现,float和position最大的区别其实是是否占据文档流空间的问题。虽然position有absolute和fixed这两个同样不会占据文档流的属性,但是这两个并不适合被用来给整个网页做布局。为什么?因为这样你就得为页面上的每一个元素设置一个xy坐标来定位。



float布局就显得灵活多了。但是一些特殊的地方搭配relative和absolute布局可以实现更好的效果。因为absolute是基于父级元素的定位,当父级元素是relative的时候,absolute的元素就会是基于它的定位了。比如你可以让一个按钮始终显示在一个元素的右下角。

所以position和float是两个概念,按需所用。

关键词:
返回列表