2020-12-04 14:16发布
浮动语法： float: left|right|none
定位语法：position:absolute|relative;
两者都是用于网页布局的。不同是元素浮动后还属于文档流模式，元素使用 absolute 定位后脱离文档流，依赖于有定位属性的父元素进行布局了。
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默认效果。
浮动是调整半个等级 定位是调整一个单位的等级
CSS中定位样式position的取值有三个，默认值：static，相对定位：relative，绝对定位：absolute。
static： 采用默认定位时，一般可以不用设置position样式。 各个元素是按照文档流的形式从上往下排，同时保证块状元素独占一行的原则。
relative : 生成相对定位的元素，相对于其正常位置进行定位，同时配合top, bottom, left和right样式完成定位。它不会影响同一容器中其他元素的定位。相对定位元素并没有脱离文档流，其参造物是其本身，不管你怎么移动，它原有的位置还是会留着，父容器对其布局影响照旧。
absolute：对于绝对定位的元素，则需要分其的父元素及以上元素的定位情况来说：
父元素中有设置了Position属性，并且属性值为 absolute 或 relative的时候，那么子元素相对于该父元素来进行定位。
父元素没有设置非static的Position属性，则以其第一个设置了非static的Position属性的祖先元素来进行定位。如果不存在一个有着position属性的祖先元素，那么那就会以body为定位对象，按照浏览器的窗口进行定位。
绝对定位是将元素彻底从文档流删除，并相对于其父元素定位，元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样，该元素再也不会影响父元素中其他元素的布局了。
浮动是占位置的，定位里的绝对定位是不占用位置的，会悬浮在父级上面，fixed定位会悬浮在流量器可是窗口上
二者最大的差别就是位置保留
一、position 的四个值：static、relative、absolute、fixed。绝对定位：absolute 和 fixed 统称为绝对定位相对定位：relative默认值：static二、relative定位与absolute定位的区别实例：HTML代码：css代码：初始效果：1、relative：相对于原来位置移动，元素...
1.static:正常文档定位，此时top,bottom,left和z-index属性无效，块级元素从上往下纵向排布，行级元素从左往右排列2.relative: 相对定位，此时的相对是相对于正常文档流的位置3.absolute:相对于最近的非static定位祖先元素的偏移，来确定元素位置，比如一个绝...
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素相对于它的起点进...
绝对定位就是你的位置已经不属于你了，你只能漂浮在半空中。相对定位就是你的位置你还占用的，人还在飘着有意思的是这些都是相对父辈元素有position为相对或者绝对属性来定位的，都找不到的话就以body窗口来定位。...
定位：1、相对定位 position:relative; 兼容2、绝对定位 absolut 兼容3、固zhuan定定位 fixed ie6不兼容
css浮动属性通俗的来说就是让一个个原本坚守自己位置的元素让它们在网页中能紧挨在一起，举个例子来说吧，就比如有两个div盒子在网页中显示，一个盒子里展示的是图片，另一个盒子中展示的是文字，他们虽说自己占有的位置不大，可是他们却各占一行来显示，这可...
引言：这篇文章是我对BFC的理解及总结，带你揭开BFC的面纱。你将会知道BFC是什么，形成BFC的条件，BFC的相关特性，以及他的实际应用。一、何为BFC BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的...
同时用JS就可以随意移动DIV标签的位置 {maxz_play} [removed]var obj=document.getElementById('idDiv');obj.style.left='10px';obj.style.top='10px';[removed]
BFC 是 Block Formatting Context（块级格式化上下文）的缩写，它是为了解决如下问题：浮动定位外边距合并清除浮动自适应多栏布局
一、何为BFC BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。二、形成BFC的条件 1、浮动元素，float 除 none 以外的值； 2、定位元素，p...
css清除浮动可以理解为打破横向排列。 清除浮动的关键字是clear，官方定义如下： 语法： clear : none | left | right | both 取值： none : 默认值。
float属性是CSS中常用的一个属性，在实际工作中使用的非常多，如果使用不当就会出现意料之外的效果。CSS世界中的float属性是一个年代非常久远的属性，设置了float属性的元素会根据设置的属性值向左或者向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边...
如果不定义浮动的话，各个div的内容在页面上是由上向下排列的。而如果某个div定义了float: left，那么这个div就会出现在上层div下最靠左的位置，而与它同一等级，但列在它后面的div就会显示在他的右侧了。同样，如果定义了float:right，那么这个div就会出现在...
1、 元素类型的转换（display属性）Display属性属性值：BlockInlineNone大部分块状元素默认的display的值为block，其中li默认的值 list-item（列表元素）大部分内联元素默认的display值为inline，其中input默认的值为：inline-block;（行内块元素）；内联元素...
最多设置5个标签!
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','/static/images/logo.png', '推荐 慢半拍 的问题《【Web前端基础】css浮动和定位有什么区别》','http://www.shouhuola.com/q-31561.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
浮动语法： float: left|right|none
定位语法：position:absolute|relative;
两者都是用于网页布局的。不同是元素浮动后还属于文档流模式，元素使用 absolute 定位后脱离文档流，依赖于有定位属性的父元素进行布局了。
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默认效果。
浮动是调整半个等级 定位是调整一个单位的等级
定位样式
CSS中定位样式position的取值有三个，默认值：static，相对定位：relative，绝对定位：absolute。
static： 采用默认定位时，一般可以不用设置position样式。 各个元素是按照文档流的形式从上往下排，同时保证块状元素独占一行的原则。
relative : 生成相对定位的元素，相对于其正常位置进行定位，同时配合top, bottom, left和right样式完成定位。它不会影响同一容器中其他元素的定位。
相对定位元素并没有脱离文档流，其参造物是其本身，不管你怎么移动，它原有的位置还是会留着，父容器对其布局影响照旧。
absolute：对于绝对定位的元素，则需要分其的父元素及以上元素的定位情况来说：
父元素中有设置了Position属性，并且属性值为 absolute 或 relative的时候，那么子元素相对于该父元素来进行定位。
父元素没有设置非static的Position属性，则以其第一个设置了非static的Position属性的祖先元素来进行定位。如果不存在一个有着position属性的祖先元素，那么那就会以body为定位对象，按照浏览器的窗口进行定位。
绝对定位是将元素彻底从文档流删除，并相对于其父元素定位，元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样，该元素再也不会影响父元素中其他元素的布局了。
浮动是占位置的，定位里的绝对定位是不占用位置的，会悬浮在父级上面，fixed定位会悬浮在流量器可是窗口上
二者最大的差别就是位置保留
相关问题推荐
一、position 的四个值：static、relative、absolute、fixed。绝对定位：absolute 和 fixed 统称为绝对定位相对定位：relative默认值：static二、relative定位与absolute定位的区别实例：HTML代码：css代码：初始效果：1、relative：相对于原来位置移动，元素...
1.static:正常文档定位，此时top,bottom,left和z-index属性无效，块级元素从上往下纵向排布，行级元素从左往右排列2.relative: 相对定位，此时的相对是相对于正常文档流的位置3.absolute:相对于最近的非static定位祖先元素的偏移，来确定元素位置，比如一个绝...
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素相对于它的起点进...
绝对定位就是你的位置已经不属于你了，你只能漂浮在半空中。相对定位就是你的位置你还占用的，人还在飘着有意思的是这些都是相对父辈元素有position为相对或者绝对属性来定位的，都找不到的话就以body窗口来定位。...
定位：1、相对定位 position:relative; 兼容2、绝对定位 absolut 兼容3、固zhuan定定位 fixed ie6不兼容
css浮动属性通俗的来说就是让一个个原本坚守自己位置的元素让它们在网页中能紧挨在一起，举个例子来说吧，就比如有两个div盒子在网页中显示，一个盒子里展示的是图片，另一个盒子中展示的是文字，他们虽说自己占有的位置不大，可是他们却各占一行来显示，这可...
引言：这篇文章是我对BFC的理解及总结，带你揭开BFC的面纱。你将会知道BFC是什么，形成BFC的条件，BFC的相关特性，以及他的实际应用。一、何为BFC BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的...
同时用JS就可以随意移动DIV标签的位置 {maxz_play} [removed]var obj=document.getElementById('idDiv');obj.style.left='10px';obj.style.top='10px';[removed]
css浮动属性通俗的来说就是让一个个原本坚守自己位置的元素让它们在网页中能紧挨在一起，举个例子来说吧，就比如有两个div盒子在网页中显示，一个盒子里展示的是图片，另一个盒子中展示的是文字，他们虽说自己占有的位置不大，可是他们却各占一行来显示，这可...
BFC 是 Block Formatting Context（块级格式化上下文）的缩写，它是为了解决如下问题：浮动定位外边距合并清除浮动自适应多栏布局
一、何为BFC BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。二、形成BFC的条件 1、浮动元素，float 除 none 以外的值； 2、定位元素，p...
css清除浮动可以理解为打破横向排列。 清除浮动的关键字是clear，官方定义如下： 语法： clear : none | left | right | both 取值： none : 默认值。
float属性是CSS中常用的一个属性，在实际工作中使用的非常多，如果使用不当就会出现意料之外的效果。CSS世界中的float属性是一个年代非常久远的属性，设置了float属性的元素会根据设置的属性值向左或者向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边...
如果不定义浮动的话，各个div的内容在页面上是由上向下排列的。而如果某个div定义了float: left，那么这个div就会出现在上层div下最靠左的位置，而与它同一等级，但列在它后面的div就会显示在他的右侧了。同样，如果定义了float:right，那么这个div就会出现在...
1、 元素类型的转换（display属性）Display属性属性值：BlockInlineNone大部分块状元素默认的display的值为block，其中li默认的值 list-item（列表元素）大部分内联元素默认的display值为inline，其中input默认的值为：inline-block;（行内块元素）；内联元素...