在CSS 中，用 float 和 position 的区别是啥
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在CSS 中，用 float 和 position 的区别是啥相关的知识，希望对你有一定的参考价值。
在CSS 中，用 float 和 position的区别如下：
1、Float属性
float的属性值有none、left、right，有几个要点：
只有横向浮动，并没有纵向浮动。
当元素应用了float属性后，将会脱离普通流，其容器（父）元素将得不到脱离普通流的子元素高度。
会将元素的display属性变更为block。
浮动元素的后一个元素会围绕着浮动元素（典型运用是文字围绕图片），与应用了position的元素相比浮动元素并不会遮盖后一个元素。
浮动元素的前一个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都应用float）。
2、Position属性值
Position的属性值共有四个static、relative、absolute、fixed。
应用了position: absolute的元素会循着节点树中的父（祖）元素来确定“根”，然后相对这个“根”元素来偏移。如果在其节点树中所有父（祖）元素都没有设置position属性值为relative或者absolute则该元素最终将对body进行位置偏移。应用了position: absolute的元素会脱离页面中的普通流并改变Display属性（重点）
<body style="background: yellow;">
<div style="background: #fff">
A
<div style="background: #81b6ff">
A - 1
<div style="background: #b6ff00;">
A - 2
</div>
</div>
</div>
</body>
float是浮动属性。
比如页面有两个元素，<div id="div1"></div><div id="div2"></div>
这时这两个元素是上下显示的，但是加上了float:left;之后，就会在同一行显示了。
而position，分为absolute,reaative,static,fixed四种。
static：静态定位。如果你没有设置position属性，那么缺省就是static。top，left，bottom，right等属性，在static的情况下是无效的，要使用这些属性，必须把position设置为其他三个值之一。
Relative：相对定位。元素将按照静态定位时的位置进行调整，在静态定位中分配给元素的空间仍然会分配给它，它两边的元素不会向它靠近来填充那个空间，但它们也不会从元素的新位置被挤走。
Absolute：绝对定位。元素将按照包含它的元素的位置进行调整，比如它嵌套在另一个绝对定位的元素中，那么就相对于那个元素定位。
Fixed：固定定位。元素将被设置在浏览器上一个固定位置上，不会随其他元素滚动。形象点说，上下拉动滚动条的时候，fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。
position：移动 这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
他俩最大的区别是：float只能靠左或靠右移动但不能超过div的款宽 position只可以定位不能移动 可以根据其他属性进行移动
关于float和position
在div 块级元素中，一般我们的div块都是流式的，如果你设定一个div，接下来的div就会另起行，也就是块级元素的定义
但是一般排版不是这样的，最典型的应该就是这种布局了，那么中间的那三个div块，就是float的效果了
首先一个简单的例子
这个就是典型的div块分布（有三个div）
然后如果在float2加上float:left的话，效果就会变成下面这样
float使你设置的元素脱离了父级元素（本来这里float2是最大的div的子级元素）
float的属性有left,right,none;
那么就可以解决上面第一张图中间的布局，但是这里还有一个问题，就是下面的注脚，
如果直接div不设置任何东西的话，而中间的三个div都设置float:left的话，结果就是这样
那个黄色的注脚隐藏在三个div后面
这就是前面说的float使得前面三个div脱离父级元素，因此footer成为banner后面的块级元素，
这时，如果想清除float对div的影响，可以用clear：both;（也可以单独设一个div，设定属性clear:both就可以清除影响）
这时就完成了第一张图片的布局
注意，如果只是设置一个div的float的话，接下来的div会环绕着这个设置了float的div，如下图
最后，贴个第一张图的样式代码
1 body{
2 background:#2286c6;
3 margin:0px;
4 padding:0px;
5 font-size:12px;
6 font-family:Arial;
7 }
8 #container{
9 margin:0px auto;
10 width:780px;
11 height:600px;
12 text-alignment:left;
13 background:#123456;
14
15 }
16 #banner{
17 margin:0px;
18 padding:0px;
19 background:#778899;
20 height:150px;
21 width:100%;
22 }
23 #globlink{
24 margin:0px;
25 padding:0px;
26 background:#567;
27 height:50px;
28 width:100%;
29 }
30 #left{
31 width:200px;
32 height:370px;
33 background:red;
34 margin:0px;
35 padding:0px 0px 5px 0px ;
36 color:#d8ecff;
37 float:left;
38 }
39
40 #middle{
41 width:400px;
42 height:370px;
43 background:blue;
44 margin:0px 2px ;
45 padding:0px 0px 5px 0px ;
46 color:#d8ecff;
47 float:left;
48 }
49 #right{
50 width:176px;
51 height:370px;
52 background:pink;
53 margin:0px ;
54 padding:0px 0px 5px 0px ;
55 color:#d8ecff;
56 float:left;
57 }
58 #footer{
59 width:100%;
60 height:30px;
61 background:yellow;
62 margin:1px 0px 0px 0px ;
63 padding:1px 0px ;
64 color:#d8ecff;
65 clear:both;
66 }
以上是关于在CSS 中，用 float 和 position 的区别是啥的主要内容，如果未能解决你的问题，请参考以下文章
CSS布局：float、position、flex、grid