搜索
您的当前位置:首页正文

CSS布局:浮动与绝对定位的异同点_html/css

2023-11-27 来源:软文情感网

浮动 ( float ) 和绝对定位 ( position:absolute )

相同点:(1)都是漂起来( 离开原来的位置 )

(2)并且都不占着原来的位置

(3)另外,如h1包文字的标签,默认只设height的情况下,它的width是铺满父元素的宽度的,而当浮动或绝对定位后,它的宽度就是h1内文字的宽度

不同点:float后,(这里float:left )它后面的对象,会占据它原来的位置,

但是后面对象里的文字和图片等好像知道它在左边,所以他们会自动的在它后面显示,

也就是,后面对象的文字图片等不会被它挡住

position:absolute绝对定位后,它后面的对象,也会占据它原来的位置,

但是后面的对象,完全视它不存在,直接在左上角显示,

也就是,后面对象的文字图片等左上部分会被它挡住

默认情况下(即h3不设浮动、不设绝对定位)

h3设float情况下

h3设绝对定位情况下

小编还为您整理了以下内容,可能对您也有帮助:

在CSS 中,用 float 和 position 的区别是什么

CSS布局浮动(float)和定位(position)属性的区别:

1、postion:relative是子块级元素面向父级元素的相对定位,定位关键字使用left/right/top/bottom。兄弟块元素之间相对进行定位,但是position移动后,原位置依然保留。而且随后的兄弟块元素定位基于被移走前的位置。

2、float:right/left是子块级元素流集合面向父级元素的定位,定位的关键词使用margin/padding。兄弟块元素之间进行相对的定位均基于移动后的新位置进行重新渲染,可以重叠,原位置被清空。

二者之中最大的差别就是位置保留。

3、同时应用position: absolute和float: left会导致清除浮动无效(position: relative则可以清除浮动)。

常用的清除浮动的方法有两种:

通过在容器中添加一个标签,设置该标签的样式为 clear: both

容器设置overflow: hidden

<div style="background: #fff; width: 100%; overflow: hidden;">

   <div style="float: left; position: absolute;">我是DIV</div>

   <div style="clear: both;"></div>

<div>

效果:

在CSS 中,用 float 和 position 的区别是什么

两者是有绝对的区别的,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>

效果如下:

CSS布局浮动和定位属性的区别?

本文针对CSS浮动float、定位position进行学习理解,通过实例帮助大家掌握CSS浮动float、定位position技巧,感兴趣的小伙伴们可以参考一下

一 . 浮动float

I . 定义及规则

float默认为none,对应标准流的情况。当float : left;时,元素就会向其父元素的左侧靠紧,脱离标准流,同时宽度不再伸展至充满父容器,而是根据自身内容来确定。

II . 演示规则

准备代码

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> body { margin: 0; padding: 0; } #father { background-color: cyan; /*父级p 没有定位 造成子p的margin-top传递给父级*/ position: absolute; } #father * { margin: 10px; padding: 10px; border: 1px dashed red; } #son1 { } #son2 { } #son3 { } </style> </head> <body> <p id="father"> <p id="son1">#son1</p> <p id="son2">#son2</p> <p id="son3">#son3-son3son3son3</p> <p> 这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字 </p> </p> </body> </html>

1、中间给#father加上position:absolute,是为了消除未定位父p的margin-top传递问题,相关内容如下

嵌套p中margin-top转移问题的解决办法

在这两个浏览器中,有两个嵌套关系的p,如果外层p的父元素padding值为0,那么内层p的margin-top或者margin-bottom的值会“转移”给外层p。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <p style="background-color:#FF0000;width:300px; height:100px">上部层</p> <p style="background-color:#009900; width:300px; height:300px;overflow:hidden "> <!--父层--> <p style="margin:50px; background-color:#000000;width:200px; height:200px"">子层</p> </p> </body> </html>

原因:盒子没有获得 haslayout 造成 margin-top无效

解决办法:
1、在父层p加上:overflow:hidden;
2、把margin-top外边距改成padding-top内边距 ;
3、父元素产生边距重叠的边有不为 0 的 padding 或宽度不为 0 且 style 不为 none 的 border。
父层p加: padding-top: 1px;
4、让父元素生成一个 block formating context,以下属性可以实现
* float: left/right
* position: absolute
* display: inline-block/table-cell(或其他 table 类型)
* overflow: hidden/auto
父层p加:position: absolute;

显示效果为

2、1,2的float分别为left right时,有

可见1,2脱离标准流,标准流中的son3当他们不存在,于是son3代替原来son1的位置,而son1的左border、son2的右border与son3的左右border重合

3、当1,2,3全都float left时

文字围绕着float过的p

4、1,2左浮动,3右浮动,当窗口宽度减小时,3会被挤下来

当3左浮动,2右浮动的时候,显示为

当浏览器窗口宽度减小时,猜猜谁会被挤下来,son2么?

答案还是son3,规则为 : 写在html文件中后面的会被挤下来,在html文件中,son3在son2后面,因此总是son3先挤下来。

5、增加son1高度,son3挤下来时会卡在那里

6、删除盒子中的文字,3个子p全部左浮动
显示为

父p中的三个子p全部脱离标准流了,父p就缩成一条线了,可以用clear来修正
加一个margin-padding-border全为0,clear为both的空p,来撑大父p

III . clear清除浮动
如果前面有float:left的元素,他会影响下面元素,如上例中的p,在p元素中写clear : left即可消除前面左浮动元素对本元素的影响.同理clear:both是左右都清除.

二 . 定位position

position取值有static absolute relative fixed

1. static
这个是默认的,即标准流排下来,就是static定位方式.

2. fixed
在浏览器窗口中固定,什么论坛中的[回到顶部]这种按钮就是fixed做的
练习做个回到顶部玩玩

<p id="backToTop"> 回到顶部 </p> #backToTop { width: 100px; height: 50px; background-color: red; color: white; cursor: pointer; border-radius: 25px 0 0 25px; padding-left: 20px; text-align: center; line-height: 50px; position: fixed; bottombottom: 80px; rightright: 0; }

显示效果

3. relative相对定位

相对于自己的偏移,而且不脱离标准流,使用top/bottom left/right指定偏移量

4. absolute绝对定位

根据别的已定位元素进行定位,应用absolute规则的脱离标准流

1)、这个别的元素:
离它最近的已定位的祖先元素 或者 浏览器窗口,当找不到前面的祖先元素时,就以后者浏览器窗口来定位.
2)、已经定位 : 是指position已经设置,而且不是static...即position值不为static就是已经定位的元素,未设置position或设置为static认为它没有定位.
Trick

只设置 position : absolute,而不设置top/bottom/left/right值,那么元素会保持在原地,但是已经脱离标准流.

三 . display

display取值有inline block none

设置为none,即可将其隐藏,像inline-block等新添加的

CSS布局浮动和定位属性的区别?

本文针对CSS浮动float、定位position进行学习理解,通过实例帮助大家掌握CSS浮动float、定位position技巧,感兴趣的小伙伴们可以参考一下

一 . 浮动float

I . 定义及规则

float默认为none,对应标准流的情况。当float : left;时,元素就会向其父元素的左侧靠紧,脱离标准流,同时宽度不再伸展至充满父容器,而是根据自身内容来确定。

II . 演示规则

准备代码

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> body { margin: 0; padding: 0; } #father { background-color: cyan; /*父级p 没有定位 造成子p的margin-top传递给父级*/ position: absolute; } #father * { margin: 10px; padding: 10px; border: 1px dashed red; } #son1 { } #son2 { } #son3 { } </style> </head> <body> <p id="father"> <p id="son1">#son1</p> <p id="son2">#son2</p> <p id="son3">#son3-son3son3son3</p> <p> 这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字 </p> </p> </body> </html>

1、中间给#father加上position:absolute,是为了消除未定位父p的margin-top传递问题,相关内容如下

嵌套p中margin-top转移问题的解决办法

在这两个浏览器中,有两个嵌套关系的p,如果外层p的父元素padding值为0,那么内层p的margin-top或者margin-bottom的值会“转移”给外层p。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <p style="background-color:#FF0000;width:300px; height:100px">上部层</p> <p style="background-color:#009900; width:300px; height:300px;overflow:hidden "> <!--父层--> <p style="margin:50px; background-color:#000000;width:200px; height:200px"">子层</p> </p> </body> </html>

原因:盒子没有获得 haslayout 造成 margin-top无效

解决办法:
1、在父层p加上:overflow:hidden;
2、把margin-top外边距改成padding-top内边距 ;
3、父元素产生边距重叠的边有不为 0 的 padding 或宽度不为 0 且 style 不为 none 的 border。
父层p加: padding-top: 1px;
4、让父元素生成一个 block formating context,以下属性可以实现
* float: left/right
* position: absolute
* display: inline-block/table-cell(或其他 table 类型)
* overflow: hidden/auto
父层p加:position: absolute;

显示效果为

2、1,2的float分别为left right时,有

可见1,2脱离标准流,标准流中的son3当他们不存在,于是son3代替原来son1的位置,而son1的左border、son2的右border与son3的左右border重合

3、当1,2,3全都float left时

文字围绕着float过的p

4、1,2左浮动,3右浮动,当窗口宽度减小时,3会被挤下来

当3左浮动,2右浮动的时候,显示为

当浏览器窗口宽度减小时,猜猜谁会被挤下来,son2么?

答案还是son3,规则为 : 写在html文件中后面的会被挤下来,在html文件中,son3在son2后面,因此总是son3先挤下来。

5、增加son1高度,son3挤下来时会卡在那里

6、删除盒子中的文字,3个子p全部左浮动
显示为

父p中的三个子p全部脱离标准流了,父p就缩成一条线了,可以用clear来修正
加一个margin-padding-border全为0,clear为both的空p,来撑大父p

III . clear清除浮动
如果前面有float:left的元素,他会影响下面元素,如上例中的p,在p元素中写clear : left即可消除前面左浮动元素对本元素的影响.同理clear:both是左右都清除.

二 . 定位position

position取值有static absolute relative fixed

1. static
这个是默认的,即标准流排下来,就是static定位方式.

2. fixed
在浏览器窗口中固定,什么论坛中的[回到顶部]这种按钮就是fixed做的
练习做个回到顶部玩玩

<p id="backToTop"> 回到顶部 </p> #backToTop { width: 100px; height: 50px; background-color: red; color: white; cursor: pointer; border-radius: 25px 0 0 25px; padding-left: 20px; text-align: center; line-height: 50px; position: fixed; bottombottom: 80px; rightright: 0; }

显示效果

3. relative相对定位

相对于自己的偏移,而且不脱离标准流,使用top/bottom left/right指定偏移量

4. absolute绝对定位

根据别的已定位元素进行定位,应用absolute规则的脱离标准流

1)、这个别的元素:
离它最近的已定位的祖先元素 或者 浏览器窗口,当找不到前面的祖先元素时,就以后者浏览器窗口来定位.
2)、已经定位 : 是指position已经设置,而且不是static...即position值不为static就是已经定位的元素,未设置position或设置为static认为它没有定位.
Trick

只设置 position : absolute,而不设置top/bottom/left/right值,那么元素会保持在原地,但是已经脱离标准流.

三 . display

display取值有inline block none

设置为none,即可将其隐藏,像inline-block等新添加的

在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>

HTML/CSS绝对定位和浮动一样吗?

绝对定位和浮动一样吗?

不一样。他们是两种不同的布局方式。

如果两个div挨着,前面一个div设置了绝对定位那么它后面的那个div会浮上去吗?

第一个div被绝对定位后,后面的div会往前。你可以看下下面的效果。

如图,当第一个元素设置了绝对定位后,元素2就浮动到元素1的下方了。

希望能帮到你~追答解决了吗

软文情感网还为您提供以下相关内容希望对您有帮助:

在CSS 中,用 float 和 position 的区别是什么

两者是有绝对的区别的,float是时元素浮动,而position是用来给一个元素定位的。1、float的定义和常见用法:float属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以...

在CSS 中,用 float 和 position 的区别是什么

CSS布局浮动(float)和定位(position)属性的区别:1、postion:relative是子块级元素面向父级元素的相对定位,定位关键字使用left/right/top/bottom。兄弟块元素之间相对进行定位,但是position移动后,原位置依然保留。而且随后的兄...

HTML/CSS绝对定位和浮动一样吗?

不一样。他们是两种不同的布局方式。如果两个div挨着,前面一个div设置了绝对定位那么它后面的那个div会浮上去吗?第一个div被绝对定位后,后面的div会往前。你可以看下下面的效果。如图,当第一个元素设置了绝对定位后,...

CSS布局浮动和定位属性的区别?

定位属性:position:这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏 值 描述 absolute ...

在CSS 中,用 float 和 position 的区别是什么

在CSS里float是浮动的意思,position是定位的意思。float:浮动,故名思议,就是让HTML元素(标签)从标准文档流里浮动起来。从而不受标准文档流的约束,变成了非标准流。标准文档流:HTML的默认布局方式,即元素从上往下,从左...

CSS用浮动好还是绝对定位好(如图)?

一般情况下使用浮动 在外层定宽的情况下,整体的效果在不同的浏览器中会一致。&lt;style&gt; .footer{width:936px; overflow:hidden; margin:2px;padding:10px;} .footer_left{float:left;width:150px;} .footer_right{float...

请问为什么div浮动后没有把行内元素覆盖住

第一,浮动的目的。最初时,浮动只能用于图像(某些浏览器还支持表的浮动),目的就是为了允许其他内容(如文本)“围绕”该图像。而后来的CSS允许浮动任何元素。第二,绝对定位与浮动的区别。绝对定位是将元素彻底从文档流...

在CSS 中,用 float 和 position 的区别是什么

在CSS 中,用 float 和 position的区别如下:1、Float属性 float的属性值有none、left、right,有几个要点:只有横向浮动,并没有纵向浮动。当元素应用了float属性后,将会脱离普通流,其容器(父)元素将得不到脱离普通流...

css中的绝对定位和相对定位有什么区别?

css中的绝对定位和相对定位的区别:position: absolute,绝对定位。position: relative,相对定位。position:absolute,float会隐式地改变display的类型(display:none除外)。即是当元素设置position:absolute、float:left、float:...

css固定定位于绝对定位的区别

总结:固定定位于绝对定位最根本的区别还是偏移基准的不同固定定位是相对于屏幕而绝对定位的基准则是父级元素,而且最好还要注意ie6不兼容固定定位而兼容绝对定位

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

热门图文

  • 读《杜工部集》二首的全文 读《杜工部集》二首的全文是什么

    《读《杜工部集》二首》贯休全文:造化拾无遗,唯应杜甫诗。岂非玄域橐,夺得古人旗。日月精华薄,山川气概卑。古今吟不尽,惆怅不同时。甫也道亦丧,孤身出蜀城。彩毫终不撅,白雪更能轻。命薄相如命,名齐李白名。不知耒阳令,何以葬先生。

  • 读《杜工部集》二首的全文是什么

    《读《杜工部集》二首》贯休全文:造化拾无遗,唯应杜甫诗。岂非玄域橐,夺得古人旗。日月精华薄,山川气概卑。古今吟不尽,惆怅不同时。甫也道亦丧,孤身出蜀城。彩毫终不撅,白雪更能轻。命薄相如命,名齐李白名。不知耒阳令,何以葬先生。

  • 读《杜工部集》二首的全文

    《读《杜工部集》二首》贯休全文:造化拾无遗,唯应杜甫诗。岂非玄域橐,夺得古人旗。日月精华薄,山川气概卑。古今吟不尽,惆怅不同时。甫也道亦丧,孤身出蜀城。彩毫终不撅,白雪更能轻。命薄相如命,名齐李白名。不知耒阳令,何以葬先生。

  • 读《杜工部集》二首全文

    《读《杜工部集》二首》贯休全文:造化拾无遗,唯应杜甫诗。岂非玄域橐,夺得古人旗。日月精华薄,山川气概卑。古今吟不尽,惆怅不同时。甫也道亦丧,孤身出蜀城。彩毫终不撅,白雪更能轻。命薄相如命,名齐李白名。不知耒阳令,何以葬先生。

  • 读《杜工部集》二首的朝代是什么

    《读《杜工部集》二首》贯休朝代:唐代

Top