float从字面上的意思就是浮动,float能让元素从文档流中抽出,它并不占文档流的空间,典型的就是图文混排中文字环绕图片的效果了。不过需要注意的是清除浮动是我们可能需要注意的地方。
而position顾名思义就是定位。他有以下这几种属性:static(默认),relative(相对定位),absolute(绝对定位)和fixed(固定定位)。其中static和relative会占据文档流空间,他们并不是脱离文档的。absolute和fixed是脱离文档流的,不会占据文档流空间。
比较可以发现,float和position最大的区别其实是是否占据文档流空间的问题。虽然position有absolute和fixed这两个同样不会占据文档流的属性,但是这两个并不适合被用来给整个网页做布局。因为这样我们得为页面上的每一个元素设置左右和上下定位。
float布局就显得灵活多了。但是一些特殊的地方搭配relative和absolute布局可以实现更好的效果。因为absolute是基于父级元素的定位,当父级元素是relative的时候,absolute的元素就会是基于它的定位了。比如可以让一个按钮始终显示在一个元素的右下角。
总结一句就是不推荐用position来布局整个页面的大框架,而推荐用float或者文档流的默认方式。 
所以并没有谁更好,两者按需使用,就能各得所需的效果。
 

float和position谁好?的更多相关文章

  1. CSS传统布局之display属性+float属性+position属性

    这三个属性是传统网页布局中经常用到的属性. 读这篇文章之前,希望你对css布局模型已经有了一定的了解.因为本文的三个属性是和css三个布局模型紧密联系在一起的.因此,如若你并不了解,我推荐你先看一下c ...

  2. CSS布局模型学习(Float、Position、Flexbox)

    一.Floatfloat 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 清除浮 ...

  3. inline元素、inline-block元素在float、position:fixed、position:absolute之后出现的问题

    我们知道内联元素是不能设置宽.高的,但是一旦使其脱离了文档流,就可以了,这是因为它已经变成了块级元素. 例1: <!DOCTYPE html> <html lang="en ...

  4. CSS 盒子模型及 float 和 position

    ## CSS和模型 ##CSS盒模型本质上是一个盒子,封装周围的 HTML 元素,包括 外边距(marign),边框(border),填充(padding),内容物(content) 盒子模型的类型: ...

  5. CSS 中,用 float 和 position 的区别是什么?

    CSS 中,用 float 和 position 的区别是什么? 呃,其实这个命题有误,只有position才是定位,float不能说是定位,不过你可以说这两种布局方式有什么不同.float和posi ...

  6. float与position间的区别

    float与position间的区别:    个人理解为:脱离文档流不一定脱离文本流:但脱离文本流,则也脱离文档流.[如有更好的理解还望评论区一起探讨,共同学习进步]一.float 浮动(脱离文档流, ...

  7. float和position:absolute脱离文本流的区别

    float和position:absolute脱离文本流的区别原创 paediatrician 最后发布于2016-09-19 10:43:05 阅读数 5375 收藏展开 文档流:将窗体自上而下分成 ...

  8. [转][译]关于CSS中的float和position和z-index

    原文:http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取 ...

  9. CSS:布局的三个关键属性:float、position、display

    最近在出差,就我一个在这里.客户要做几个页面,涉及到了页面的布局问题,没办法自己得做了.然后就遇到了一些问题.页面不论怎么都不能按照设想的布局. 以前也没有做过网页布局方面的工作.上网上找类似的例子, ...

随机推荐

  1. 一些Java基础方面问题的总结

    1.Overloaded的方法是否可以改变返回值的类型? 答案:可以. overload是重载,overloaded是什么?重载的过去式?我还以为是我没见过的注解,也没有给限定条件,代码测试一下. p ...

  2. 2019-4-21 - plan

    设计模式 idea中demo 在test1中使用单例测试ok

  3. [转载]使用IEDriverServer.exe驱动IE11,实现自动化测试

    转自:https://www.cnblogs.com/feiquan/p/8531618.html 下载地址: http://dl.pconline.com.cn/download/771640-1. ...

  4. 查看 linux 目录大小

    查看 linux 目录大小 du -sm * | sort -n # 以m显示并按小到大排序 ​

  5. poj1151 Atlantis (线段树+扫描线+离散化)

    有点难,扫描线易懂,离散化然后线段树处理有点不太好理解. 因为这里是一个区间,所有在线段树中更新时,必须是一个长度大于1的区间才是有效的,比如[l,l]这是一根线段,而不是区间了. AC代码 #inc ...

  6. Boxes and Balls UVALive - 7500(练习赛爆零)

    原因: 自身: 1.自己并没有考虑过精度所带来的问题. 2.一定要自己读题,独立思考,末被队友带偏(矛盾出真理). 3.加强自身基础,提高自身实力. 队伍: 1.队友缺乏独立思考,需要加强. 题目描述 ...

  7. .NET开发工程师职业规划

    本人结合自己的实际状况和未来的职业规划,所做学习计划如下: 初级开发工程师(1年) 熟悉C#语言:熟悉MVC原理:熟悉 SQL Server Oracle MySql其中一种数据库,能独立编写增.删. ...

  8. echarts常用方法(一)

    目前,项目中涉及到图表的,使用echarts的频率较多,因为UI设计一般不会考虑到是否能实现的问题,他们专注的只是显示的效果.所以作为前端开发,要对echarts进行不同程度的改造,组合,甚至重写等. ...

  9. python标准库总的random函数用法

    Python标准库中的random函数,可以生成随机浮点数.整数.字符串,甚至帮助你随机选择列表序列中的一个元素,打乱一组数据等.random中的一些重要函数的用法:1 ).random() 返回0& ...

  10. 纯手工编写的PE可执行程序

    [文章标题]: 纯手工编写的PE可执行程序[文章作者]: Kinney[下载地址]: 自己搜索下载[使用工具]: C32[操作平台]: win 7[作者声明]: 只是感兴趣,没有其他目的.失误之处敬请 ...