CSS布局浮动和定位属性的区别
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS布局浮动和定位属性的区别相关的知识，希望对你有一定的参考价值。
定位属性：position：这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏值 描述
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative 生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值
==========================
浮动：float：
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
值 描述
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。
====================
postion:relative是子块级元素面向父级元素的相对定位，定位关键字使用left/right/top/bottom。兄弟块元素之间相对进行定位，但是position移动后，原位置依然保留。而且随后的兄弟块元素定位基于被移走前的位置。
float:right/left是子块级元素流集合面向父级元素的定位，定位的关键词使用margin/padding。兄弟块元素之间进行相对的定位均基于移动后的新位置进行重新渲染，可以重叠，原位置被清空。
二者之中最大的差别就是位置保留。
再简而言之，float只是行内的 左右的改变，如果后面的元素不清楚浮动clear:both的话 会影响后面元素的位置，而positon定位的影响比较广，既能定义个容器的定位也能定义一个容器里的任意定位，而不是像float一样处于一个平面级的，它是可认识改变的。尤其是position:absolute；和fixed2个都是固定任意位置，一个不随页面滚动而改变原来位置，一个随页面滚动而改变但相对位置不改变。 参考技术A float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动;display: inline-block 有些时候可以替代float实现相同的效果.
position: absolute|relative; 要配合top,left等定位;
使用：
position: absolute会导致元素脱离文档流，被定位的元素等于在文档中不占据任何位置，在另一个层呈现，可以设置z-index。PS的图层效果就是position: absolute。
float也会导致元素脱离文档流，但还在文档或容器中占据位置，把文档流和其它float元素向左或向右挤，并可能导致换行。图片的文字环绕布局效果就是float。
display的inline-block不脱离文档流，将block元素当作大型字符嵌入文档流内，类似于img或者input默认效果。 参考技术B
浮动属性 float 一般使用两个值，即 float:left; 或 float:right。用于指定子元素在父级元素中的位置，顾名思义：左或者右。比如：
<style>
#demo width:1000px;height:500px;margin:0 auto;
#leftwidth:400px;height:300px;float:left;background-color:#red;
#rightwidth:350px;height:200px;float:right;background-color:#green;
</style>
<div id="demo">
<div id="left">
<div id="right">
</div>
</html>
请您将代码复制粘贴到HTML文件自己观察，把 float：left 或 float:right 的left和right互换会怎么样，都是left或都是right会怎么样。
具体请参考 浮动 http://www.w3school.com.cn/css/css_positioning_floating.asp
定位属性 position 一般也是使用两个值，即相对定位 relative 和绝对定位 absolute.
相对定位相对上一级元素而言，可根据上级元素的位置做出位置偏移。如：
<html><style>
#demo width:1000px;height:500px;margin:0 auto;
#leftwidth:400px;height:300px;position:relative;top:50px;left:50px;background-color:#red;
#rightwidth:350px;height:200px;position:relative;bottom:150px;right:50px;background-color:#green;
</style>
<div id="demo">
<div id="left">
<div id="right">
</div>
</html>
代码中 top:50px;left:50px和bottom:150px;right:50px
分别指left元素距离demo元素的上边距、左边距各50px做位置便宜；
right元素距离demo元素的下边距150px，右边距50px做位置偏移。
至于绝对定位，您只需要将以上代码修改一下就可以知道区别了。
<html><style>
#demo width:1000px;height:500px;margin:0 auto;position:relative;
#leftwidth:400px;height:300px;position:absolute;top:50px;left:50px;background-color:#red;
#rightwidth:350px;height:200px;position:absolute;bottom:150px;right:50px;background-color:#green;
</style>
<div id="demo">
<div id="left">
<div id="right">
</div>
</html>
资料可参考 CSS定位 http://www.w3school.com.cn/css/css_positioning.asp
因为人的表述能力有限，希望您能自己动手，发现其中的奥妙。
参考技术C 你问的是float和position的区别吗？float可以让元素浮动到左右位置或者继承父级，浮动之后不会占有高度
position就稍微复杂点了，可以参看http://www.runoob.com/css/css-positioning.html 参考技术D 浮动是占位置的，定位里的绝对定位是不占用位置的，会悬浮在父级上面，fixed定位会悬浮在流量器可是窗口上
DIV+CSS布局
在DIV+CSS布局中，div承载的是内容，而css承载的是样式。
DIV+CSS布局
1.1 DIV的概念
- DIV全称division，意为“区分”，使用 DIV 的方法跟使用其他标签的方法一样。
- 如果单独使用DIV而不加任何CSS，那么它在网页中的效果和使用
<P></P>是一样的。 - DIV本身就是容器性质的，不但可以内嵌table，还可以内嵌文本和其它的HTML代码。
注意：<div>标签可以用来组合其它的HTML元素，但不能嵌套在段落元素中，例如，<p>aa<div>bb</div>cc</p>的结果是不确定的。
1.2 页面布局步骤
1、确定版心，确定网页的主体内容，在页面中水平居中显示
2、分析页面中的模块
3、控制页面中各个模块
1.3 CSS的定位机制
CSS的定位与显示属性可以把一个HTML元素定位在网页中的任何位置，定位与布局密切相关。
- 普通流方式
普通流方式是指由元素在html文件中的位置决定（由标签在文件中的位置来决定）。
块级元素（如p、h、div）（块级框）从上到下一个接一个的排列，行内元素（如span、strong元素）在行中水平布置。
除非特殊的指定，否则所有的框都在普通流中定位 - 浮动方式
浮动方式是指元素在页面中可以左右移动，直到碰到包含框或其他浮动框。 - 绝对定位
绝对定位是指直接将元素定位到页面的任何位置（通过设置元素在页面中的位置坐标来实现）。
1.4 浮动属性
1.4.1 浮动的含义
浮动是指元素脱离原有的标准文档流，移动到其父元素中指定的位置。
1.4.2 浮动的实现
浮动可以通过在元素的CSS中添加float属性来实现，其属性值有三个，分别是：
| 属性值 | 含义 |
|---|---|
| left | 向左浮动 |
| right | 向右浮动 |
| none | 不浮动(默认值) |
例如，HTML页面代码为：
<div class="d1"></div>
CSS样式为：
.d1{
width: 100px;
height: 100px;
background-color: pink;
float: right;
}
为什么说浮动元素不占空间？
以两个div为例，正常是俩个div都会显示出来，占据2空间。加入浮动后，div就会叠加显示在一个位置，此时要想让两个div正常显示一般要使用到margin-left浮动div的宽度，或者也是使用浮动。
如果不设置，div叠加在一个位置时，只是位置叠加，但div中的内容不会被覆盖，如果后面的div没有指定宽度则自动横向填充完整，文字过多则会跑到第一个div下面形成文字环绕效果。
如果指定宽度则会去掉被覆盖的宽度显示，其它的文字到浮动div下面显示，即产生文字环绕效果。
1.4.3 常见的浮动布局
1、一列固定宽度并自动居中：margin设置为auto，格式：margin: autp;
例如，HTML页面代码如下：
<div class="d1">橘猫吃不胖</div>
CSS样式如下：
.d1{
/* 设置长宽为100的正方形 */
width: 100px;
height: 100px;
/* 设置背景颜色为橙色 */
background-color: coral;
/* 列自动居中 */
margin: auto;
}
2、一列自适应宽度：相对于浏览器而言，盒子的宽度会随浏览器宽度的改变而改变，这时要用到宽度的百分比，当一个盒模型不设置宽度时，它默认是相对于浏览器显示的。
例如，HTML页面代码如下：
<div class="d1">橘猫吃不胖</div>
CSS样式如下：
.d1{
/* 设置高为100 */
height: 100px;
/* 设置背景颜色为橙色 */
background-color: coral;
/* 列自动居中 */
margin: auto;
}
3、两列自动居中：采用盒子嵌套方式实现，让外层的盒子自动居中。
例如，HTML页面中代码：
<div class="d1">
<div class="d1-1"></div>
<div class="d1-2"></div>
</div>
CSS样式为：
.d1{
/* 设置盒子长200像素，宽100像素，并且自动居中 */
width: 200px;
height: 100px;
margin: auto;
}
.d1-1{
/* 设置长宽都为100的正方形 */
width: 100px;
height: 100px;
background-color: red;
/* 向左浮动 */
float: left;
}
.d1-2{
/* 设置长宽都为100的正方形 */
width: 100px;
height: 100px;
background-color: pink;
/* 向左浮动 */
float: left;
}
1.4.4 清除浮动
当属性设置浮动时，它所在的物理位置离开了原有的文档流，它会对页面中其他元素的排版产生影响。为了使文档流能识别浮动，或者让浮动后面的元素不受影响，可以使用clear属性消除浮动，它的取值如下：
| 属性值 | 含义 |
|---|---|
| left | 清除左侧的浮动影响 |
| right | 清除右侧的浮动影响 |
| both | 清除左右两侧的浮动影响 |
例如，HTML页面中代码如下：
<div class="d1"></div>
<div class="d2">橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~</div>
下面CSS样式中未加入clear属性，效果如下：
.d1{
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
下面CSS样式中加入了clear属性，效果如下：
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
.d2{
clear: left;
}
1.5 定位属性
1.5.1 相对定位
元素以它所在的普通流中的位置为起始点进行定位(设置坐标)。如果一个元素进行相对定位，它将以它所在的位置(即它在普通流中的位置)为初始点，然后，可以通过设置垂直或水平位置，让这个元素相对于它的初始点进行移动。
格式为：
position: relative;
top: 到顶部的距离;
left: 到左边的距离;
bottom: 与底部的距离;
right: 与右边的距离;
例如，HTML页面中代码如下：
<div class="d1"></div>
<div class="d2">
<div class="d3"></div>
</div>
CSS样式如下：
.d1{
/* 长100 宽100 背景粉色 */
width: 100px;
height: 100px;
background-color: pink;
}
.d2{
/* 长200 宽200 背景黄色 */
width: 200px;
height: 200px;
background-color: palegoldenrod;
}
.d3{
/* 长100 宽100 背景紫色 */
width: 100px;
height: 100px;
background-color: plum;
/* 设置相对定位 距离顶部20 左部30 */
position: relative;
top: 20px;
left: 30px;
}
1.5.2 绝对定位
可以把元素精确定位到页面中的某个地方。
注意：
1、元素绝对定位后，它与普通文档流就没有关系，不占据普通文档流的空间，普通文档流中其他元素的布局就像绝对定位的元素不存在时一样。
2、绝对定位的元素的位置是相对于最近的父元素而言的。
3、绝对定位必须是在父元素使用相对定位的情况下才能正常使用。父元素div必须套上relative（不加这个就会根据body的左上角作为原点）。
4、应用场景一般DIV框随变动，里面也会跟着改变。一般都是相对定位接合绝对定位一起使用，如果想把一个图层置于另一个图层上面或者是弹窗就用到绝对定位，将图层固定到屏幕的固定位置就得用position:fixed了。
5、因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。而且页面中元素的z-index(层级)为0
格式为：
position: absolute;
top: 与顶部的距离;
left: 与左边的距离;
bottom: 与底部的距离;
right: 与右边的距离;
例如，HTML文件中代码如下：
<div class="d1"></div>
<div class="d2">
<div class="d3"></div>
</div>
CSS样式如下：
.d1{
/* 长100 宽100 背景粉色 */
width: 100px;
height: 100px;
background-color: pink;
}
.d2{
/* 长200 宽200 背景黄色 */
width: 200px;
height: 200px;
background-color: palegoldenrod;
}
.d3{
/* 长100 宽100 背景紫色 */
width: 100px;
height: 100px;
background-color: plum;
/* 设置相对定位 距离顶部20 左部30 */
position: absolute;
top: 20px;
left: 50px;
}
相对定位和绝对定位需要配合top、right、bottom、left 使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右。
1.6 visibility、display
| 属性 | 含义 | 属性值 |
|---|---|---|
| visibility | 设置元素是否可见 | visible：元素可见(默认值) hidden：不可见 |
| display | 设置元素的显示方式 | none：不显示 block：块状显示 inline：显示在一行 |
visibility与display隐藏元素的区别：
visibility：hidden；隐藏元素后，保留元素所占有的物理空间
display：none；隐藏元素后，不保留元素所占有的物理空间
1.7 块元素和行内元素
1.7.1 CSS中的块元素和行内元素
块元素(block)：占据了全部的宽度，在前后都有换行符
例如：<h1></h1>、<p></p>、<div></div>、<ul></ul>、<table></table>、<form></form>，它们的宽度（width）、高度（height）、内边距（padding）、外边距（margin)）都是可以控制的。
内联元素(inline)：只需要必要的宽度，不强制换行
例如：<span></span>、<a></a>，它们的宽度（width）、高度（height）、内边距（padding-top、padding-bottom）、外边距（margin-top、margin-botom）都是不能改变的。
1.7.2 html中的块元素和行内元素
块元素：无论内容是什么都会独占一行。主要用于页面布局
行内元素：只占用自身的大小，不会占用一行。
以上是关于CSS布局浮动和定位属性的区别的主要内容，如果未能解决你的问题，请参考以下文章