页面布局 float position 哪个好

其实这个问题,我现在比较喜欢使用 float 毕竟对于很多东西,代码量明显减少,不用对很多元素都应用样式,但是各有各的好处,其实还是按个人习惯加上团队的开发习惯来比较好,这里转这篇文章,其实不是完整的一篇,而是来源于知乎中的“在 CSS 布局中,用 float 好还是用 position 好?分别有什么优势?”这个问题,虽然问的是两种布局的优缺点,但是在后面的回答中,会有很多其他的知识出现,所以这才是转载的目的。

呃,其实这个命题有误,只有position才是定位,float不能说是定位,不过你可以说这两种布局方式有什么不同。

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的元素就会是基于它的定位了。比如你可以让一个按钮始终显示在一个元素的右下角。

如果说到性能问题reflow问题,将元素的position设置为absolute和fixed可以使元素从DOM树结构中脱离出来独立的存在,而浏览器在需要渲染时只需要渲染该元素以及位于该元素下方的元素,从而在某种程度上缩短浏览器渲染时间。所以如果是制作js动画等,用absolute或者fixed定位会更好。

说得不好的地方请大家补充。总结一句就是不推荐用position来布局整个页面的大框架,而推荐用float或者文档流的默认方式。

PS:

补充一下float的问题。我们常说的文档流其实是指默认文档流。基本显示模型block和inline分别是块狀换行和连续多行模型,前者可以设定尺寸,后者不可以设定尺寸(根据内容决定尺寸和折行)。

不过我们总是遇到固定尺寸,或者固定部分尺寸且不折行的场景,这个时候我们马上会想到使用float来做布局,因为float会触发shrink to fit特性,实现根据内容决定尺寸,float还不会产生折行,我们通过clear来手工模拟折行。这个现状我觉得主要是因为对inline-block的兼容性顾忌产生的,在IE6的时候它没有被广泛支持。使用position实现这样的布局需要配合javascript修正,在某些场景它比float强,因为float模拟的流动布局不是多行连续布局,一些浮动元素经常因为意外的尺寸改变被卡在我们不希望它出现的位置。所以我们可以看到像pinterest这样的网站使用了javascript配合absolute position的方式,讲布局引擎的任务完全交给javascript来实现。从表现与行为分离的角度它不太合理,但是从结果上来说它很让人满意。

但是,我写这段的意思是说,很多时候我们希望控制的布局流问题不需要float和position实现,而应该通过显示模型定义来解决。比如现在的column layout、flex box等等,都是在这个角度解决我们遇到的问题,它们应该才是正解。而我们犯这个错误的最初原因也许就是对像inline-block这样的显示模型的不信任开始的。

希望CSS3的进化能够让我们重建这样的信任。

上面是两个人的回答,都比较有代表性,虽然有些内容是重复的,但是还是建议好好看完,并且最好理解了。

评论

  1. 10年前
    2011-6-22 19:25:46

    我float用的多。。。

  2. 10年前
    2011-6-23 23:13:35

    position的效率和速度更快一些

  3. 一米 博主
    10年前
    2011-6-25 22:32:27

    @自由人
    我也是float多。
    @万戈
    不过float方便很多啊。

  4. 10年前
    2011-8-02 20:43:40

    @万戈
    简单的左右定位float要方便得多吧?

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇