在CSS 中，用 float 和 position 的区别是什么
3个回答
展开全部
两者是有绝对的区别的，float是时元素浮动，而position是用来给一个元素定位的。
1、float的定义和常见用法：
float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。、
实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width:200px;
height: 200px;
border: 2px solid pink;
margin:0 5px;
float: left;
}
</style>
</head>
<body>
<div>11111</div>
<div>22222</div>
<div>33333</div>
</body>
</html>
float属相使得块级元素的div可以在同一行并排，效果如下：
2、position定义和用法：
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
其属相值有：
绝对定位示例：
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</body>
</html>
效果如下：
本回答由电脑网络分类达人 董辉推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
共同点：对内联元素设置float或absolute属性，可以让元素脱离文档流（块级元素也可以），并且可以设置其宽高。
不同点：
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或者文档流的默认方式。
不同点：
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或者文档流的默认方式。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
2016-04-29 · 做真实的自己 用良心做教育
千锋教育
千锋教育专注HTML5大前端、JavaEE、Python、人工智能、UI＆UE、云计算、全栈软件测试、大数据、物联网+嵌入式、Unity游戏开发、网络安全、互联网营销、Go语言等培训教育。
向TA提问
关注
![]()
展开全部
一、浮动(float)
float属性经常被运用于制作Horizontal Menu（横向菜单）和实现多列式网页布局。根据它提供的left 和right 两个值，我们可以很容易的把特定的元素从文档流中抽出（也因此浮动元素不占用正常文档流的空间），靠左或者靠右对齐，而文字内容则围绕在浮动元素的周围。如果是一系列的浮动元素，则会根据所指定的浮动方式自动的排列成一行；如果页面宽度不够，则会自动换行。
二、定位(position)：相对定位(relative)、绝对定位(absolute)和z-index属性
position属性同样可以实现和float属性一样的效果，其主要被运行于网页布局上。它主要提供static, relative, absolute和fixed四个值。
float属性经常被运用于制作Horizontal Menu（横向菜单）和实现多列式网页布局。根据它提供的left 和right 两个值，我们可以很容易的把特定的元素从文档流中抽出（也因此浮动元素不占用正常文档流的空间），靠左或者靠右对齐，而文字内容则围绕在浮动元素的周围。如果是一系列的浮动元素，则会根据所指定的浮动方式自动的排列成一行；如果页面宽度不够，则会自动换行。
二、定位(position)：相对定位(relative)、绝对定位(absolute)和z-index属性
position属性同样可以实现和float属性一样的效果，其主要被运行于网页布局上。它主要提供static, relative, absolute和fixed四个值。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
