CSS教程】【Web前端基础】css浮动和定位有什么区别

2020-12-04 14:16发布

15条回答
HUANG
2楼 · 2020-12-04 15:02

浮动和定位都可以使元素脱离标准文档流,提升层级,  

浮动脱离文档流,提高半个层级,不能完全覆盖下面元素(不能覆盖图片文字)

定位脱离标准文档流,提升一个层级,可以完全覆盖下面元素及其内容



haotata
3楼 · 2020-12-04 16:22

浮动语法: 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默认效果。


我想吃肉
5楼 · 2020-12-04 18:28
定位属性: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个都是固定任意位置,一个不随页面滚动而改变原来位置,一个随页面滚动而改变但相对位置不改变。


爱煲汤的小王
6楼 · 2020-12-04 20:22

动和定位都可以使元素脱离标准文档流,提升层级,  

浮动脱离文档流,提高半个层级,不能完全覆盖下面元素(不能覆盖图片文字)

定位脱离标准文档流,提升一个层级,可以完全覆盖下面元素及其内容



我的网名不再改
7楼 · 2020-12-05 13:20
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默认效果。


我是大脸猫
8楼 · 2020-12-05 22:15

今天下班在地铁上看了一个样式教学视频,因为最近在学习前端。以前刚毕业的时候,感觉后台才是王道,但最近发现,前端也很重要,比如:自己接一些私单做的时候,自己要根据需求做好界面,才能更加符合客户需求,不然还得找人去做;不同的是,后台的就可以放心找人做,只要测试得没问题,效率还过得去就可以了,所以最近打算学好点前端,自己接一些单子来做。废话不多说,入正题:

  html是按照文件流(普通流)的方式加载的,但是全部是普通流的话,很多好看的样式是实现不了的,所以出现了浮动,相对定位,绝对定位的概念。

  一、首先,按照普通流和非普通流来分类:

    ①普通流:就是按照上下左右的顺序一行一行排列的,长度不够就会自动挤到下一行。

    ②非普通流:顾名思义就是脱离普通流的,在普通流上面是不占据位置的。css有position的样式,position包括:static,relative,absolute,fixed四种值。其中static是属于普通流;relative也是属于特殊的普通流,详细下面有介绍;absolute和fixed以及float就是属于非普通流的,加载的时候,也会顺序加载,但是会脱离普通流的位置。

  二、分别介绍static,relative,absolute,fixed和float(通过top,left,right,bottom来设置相对定位)

    ①static:就是默认的普通流,不手动设置position样式的话,默认就是static;

    ②relative:叫相对定位,指的是相对他自己原来的位置的相对位置,并且原来的位置还是占着的(所以说属于特殊的普通流),其他的元素不会填上去,但是设置好相对位置之后,他新的位置是不会挤压其他元素的,就像把该元素从原来的位置上抠出来,放在单独一层来布局。

    ③absolute:叫绝对定位,指的是①相对其父元素位置的绝对定位,但是他属于非普通流,②原来的位置是不会占着的,是单独的一层,脱离了普通流。除了以上两点,其他的和relative差不多。

    ④fixed:叫固定定位,指的是元素相对于浏览器窗口的定位(比如一些网站两边的广告),拉动滚动条,他也不会跟着动,也是属于非普通流,其他的跟relative差不多。

    ⑤float:叫浮动,是css单独的样式,有top,right,bottom,left四种常用值,以上四个是属于position的一种;float也是属于普通流,单会改变普通流。他只能和普通流在同一层,但是可以改变元素的位置,同样是占着位置的(和relative有点像),不会单独一层(而relative,absolute,fixed会单独一层,可以设置z-index属性来改变其前后位置)。使用float之后,元素则会脱离普通流,该元素则在普通流上不再占用位置,普通流的元素则会填补上去,这样如果不去设置的话则会出现重叠覆盖的情况;如果想使用了float的元素也占着普通流上的位置,该如何办呢?这时候,可以把应用了float样式的元素紧接着的元素应用clear样式,clear样式包括:both,right,left三个值。both表示right和left的float都清除掉,另外两个同理。这样子则可以清除在此之前的非普通流,让他们也占着普通流上的位置,但是这只是占着位置,其实该元素是不存在于该位置的,该位置不存在任何元素(详细自己google理解),但是这样子的话,紧接着的那个元素想设置margin等,是会出现问题的,因为应用了float样式的元素霸占的那个位置其实是什么东西也没有的,不存在边界,所以应用margin则不会以那个元素(应用了float的那个)为边界的,会跳过那个边界来计算,当然你也可以把margin设大点(也就是加上float元素的长度或者宽度)也可以达到效果。其实,可以在float后面的元素之前,单独加个 

 清楚元素来专门用于清除浮动即可,接下来的元素应用margin则可以正常起效(补充:其实一般来说,可以在样式表里面单独设置 .clear{clear:both;} 这样的样式来专门用于清除浮动,避免重复,代码会规优雅规范很多)。

    

  三、z-index作用

    可以用来处理非普通流元素的前后位置,z-index越大,元素就在越前面(同时存在普通流和非普通流的时候才有意义)。

  四、块元素和行内元素一些差别

    ①块元素才有width,height属性,而行内元素没有;

    ②每个块元素默认自动占一行,而行内默认会挤满一行才会继续下一行;

    ③行内元素在css加上“display:block”则可以使该元素变成块元素;


风火轮
9楼 · 2020-12-07 17:30

浮动和定位都可以使元素脱离标准文档流,提升层级,  

浮动脱离文档流,提高半个层级,不能完全覆盖下面元素(不能覆盖图片文字)

定位脱离标准文档流,提升一个层级,可以完全覆盖下面元素及其内容


相关问题推荐

  • 回答 11

    一、position 的四个值:static、relative、absolute、fixed。绝对定位:absolute 和 fixed 统称为绝对定位相对定位:relative默认值:static二、relative定位与absolute定位的区别实例:HTML代码:css代码:初始效果:1、relative:相对于原来位置移动,元素...

  • 回答 14

    1.static:正常文档定位,此时top,bottom,left和z-index属性无效,块级元素从上往下纵向排布,行级元素从左往右排列2.relative: 相对定位,此时的相对是相对于正常文档流的位置3.absolute:相对于最近的非static定位祖先元素的偏移,来确定元素位置,比如一个绝...

  • 回答 8

    设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素相对于它的起点进...

  • 回答 7

    绝对定位就是你的位置已经不属于你了,你只能漂浮在半空中。相对定位就是你的位置你还占用的,人还在飘着有意思的是这些都是相对父辈元素有position为相对或者绝对属性来定位的,都找不到的话就以body窗口来定位。...

  • 回答 17

    定位:1、相对定位 position:relative; 兼容2、绝对定位 absolut 兼容3、固zhuan定定位 fixed ie6不兼容

  • 回答 5

    css浮动属性通俗的来说就是让一个个原本坚守自己位置的元素让它们在网页中能紧挨在一起,举个例子来说吧,就比如有两个div盒子在网页中显示,一个盒子里展示的是图片,另一个盒子中展示的是文字,他们虽说自己占有的位置不大,可是他们却各占一行来显示,这可...

  • 回答 7

    引言:这篇文章是我对BFC的理解及总结,带你揭开BFC的面纱。你将会知道BFC是什么,形成BFC的条件,BFC的相关特性,以及他的实际应用。一、何为BFC       BFC(Block Formatting Context)格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的...

  • 回答 8

    同时用JS就可以随意移动DIV标签的位置 {maxz_play} [removed]var obj=document.getElementById('idDiv');obj.style.left='10px';obj.style.top='10px';[removed]

  • 回答 9

    css浮动属性通俗的来说就是让一个个原本坚守自己位置的元素让它们在网页中能紧挨在一起,举个例子来说吧,就比如有两个div盒子在网页中显示,一个盒子里展示的是图片,另一个盒子中展示的是文字,他们虽说自己占有的位置不大,可是他们却各占一行来显示,这可...

  • 回答 12

    BFC 是 Block Formatting Context(块级格式化上下文)的缩写,它是为了解决如下问题:浮动定位外边距合并清除浮动自适应多栏布局

  • 回答 9

    一、何为BFC       BFC(Block Formatting Context)格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器。二、形成BFC的条件      1、浮动元素,float 除 none 以外的值;       2、定位元素,p...

  • 回答 12

    css清除浮动可以理解为打破横向排列。 清除浮动的关键字是clear,官方定义如下: 语法: clear : none | left | right | both 取值: none : 默认值。

  • 回答 11

    float属性是CSS中常用的一个属性,在实际工作中使用的非常多,如果使用不当就会出现意料之外的效果。CSS世界中的float属性是一个年代非常久远的属性,设置了float属性的元素会根据设置的属性值向左或者向右浮动,直到它的外边缘碰到包含框或另一个浮动框的边...

  • 回答 11

    如果不定义浮动的话,各个div的内容在页面上是由上向下排列的。而如果某个div定义了float: left,那么这个div就会出现在上层div下最靠左的位置,而与它同一等级,但列在它后面的div就会显示在他的右侧了。同样,如果定义了float:right,那么这个div就会出现在...

  • 回答 6

    1、 元素类型的转换(display属性)Display属性属性值:BlockInlineNone大部分块状元素默认的display的值为block,其中li默认的值 list-item(列表元素)大部分内联元素默认的display值为inline,其中input默认的值为:inline-block;(行内块元素);内联元素...

没有解决我的问题,去提问