position:absolute和float属性的异同？

最新推荐文章于 2024-07-09 15:21:50 发布
转载 最新推荐文章于 2024-07-09 15:21:50 发布 · 835 阅读 · 1

本文对比了CSS中float与absolute两种布局方式的相似之处及区别。共同点在于两者均可使元素脱离文档流并允许设置宽度和高度。不同的是，float元素仍然占据原有位置，而absolute则完全脱离文档流，可能会覆盖其他元素。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

共同点：对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。

不同点：float仍会占据位置，absolute会覆盖文档流中的其他元素。这里写图片描述

前端柯南
关注
CSS篇-2
m0_60311269的博客
05-30 302
CSS 选择器提供了极其丰富和灵活的方式来选择和样式化 HTML 元素。从最基础的元素选择器，到基于关系、属性、状态和虚拟部分的复杂选择器，它们共同构成了 CSS 样式规则的强大匹配机制。在实际开发中，合理、高效地使用这些选择器，是编写出健壮、可维护、高性能 CSS 代码的关键。选择器的效率和特异性（权重）是需要考量的因素。通常建议使用尽可能具体且高效的选择器来定位元素，避免使用过于宽泛的通配符选择器，同时也要平衡选择器的复杂度与可读性。
详细分析css float 属性以及position:absolute 的区别
10-25
相信很多人都有这样的问题，在页面布局中float和position:absolute哪个更好用呢？既然是布局，就用float好，这个我比较常用。这个浮动是可以清除的，一般不会影响整体布局。而position，定位，是不受约束的，这个貌似都谈不上布局了，一般要是做什么特殊的定位或者浮动层的时候，可以考虑使用。正常页面布局，我个人建议用FLOAT
position:absolute和float属性的异同
chenxiaodage的博客
10-08 808
共同点：对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。 不同点：float仍会占据位置，absolute会覆盖文档流中的其他元素。
关于css float 属性以及position:absolute 的区别。
weixin_30559481的博客
05-25 173
1.float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。div一个典型的块级元素，会单独占据一行。 先看看最基本的块级元素如何排列的。html代码，以下样式都是基于此。 <div class="boxBg"> <div class...
关于浮动float属性和position:absolute属性的区别
baguangkui4924的博客
04-11 221
最近返回头看了很多书籍，一直在纠结float属性和absolute绝对定位的区别和使用的情况，给大家分享一下自己的心得和体会吧。 1，float属性 float属性意义是让元素拜托独占一行的霸道总裁，成为一个普普通通的人。比如下面这个例子 如图，我们为第一个盒子第一个盒子设置了float：left属性，他也就失去了霸道总裁独占一行的特点，下面的盒子就上位。 但是我们发现一个问...
Transformer中Relative Position Bias以及DropPath细节梳理
AmibitionWei的博客
07-20 3295
Transformer中Relative Position Bias以及DropPath细节梳理
前端基础面试题答案
sunzhen15896的博客
03-19 3063
1.XHTML与HTML的有何异同？ 答：都是标记语言，都用标签来标记元素，都符合w3c标准 xhtml元素必须嵌套，必须是小写字母，标签必须闭合，必须有根元素 2.css盒模型，弹性盒模型是什么？ 答：标准css盒模型：margin,content,padding,border ie盒模型：margin和content，content包含了padding和border 当页面需要适配不同的屏幕大...
2023 前端开发 HTML CSS 宝典：浮动和定位特性探索
HTML 和 CSS 基础回顾 HTML 和 CSS 是前端开发中至关重要的两个技术，下面我们来回顾它们的基础知识。 ## 1.1 HTML 标记语言简介与基本结构 HTML（HyperText Markup Language）是用于创建网页结构的标记语言。它...
CSS 布局属性详解：position:absolute 与 float 的异同
最新发布
My_wife_QBL的博客
07-09 909
CSS 布局属性是指用于控制 HTML 元素在页面中位置和排列方式的属性。常见的布局属性包括positionfloatdisplay等。本文将重点介绍和float这两个属性。left: 20px;：将元素设置为绝对定位。topleftbottomright：用于指定元素相对于其定位祖先元素的位置。float.element {/* 或 float: right;*/：使元素向左浮动。：使元素向右浮动。
绝对定位absolute和浮动定位float的异同
weixin_34184561的博客
04-06 1083
元素定位的方式 absoute和float的异同 1、元素定位的方式主要有以下几种： absolute:生成绝对定位的元素， 相对于最近一级的定位不是 static 的父元素来进行定位。 fixed（老IE不支持）：生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。 relative：生成相对定位的元素，相对于其在普通流中的位置进行定位。 static：默...
float属性与position(定位)属性的区别
joker的博客
11-23 858
float属性 先来了解一下block元素和inline元素在文档流中的排列方式。 block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性； inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随...
css定位中position:absolute与float的区别
kbx8916的博客
07-05 540
position:absolute 设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 float情况下 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为
float和position:absolute脱离文本流的区别
paediatrician的博客
09-19 6283
文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行，内联元素不独占一行； CSS中脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。 　　需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。 　　而对于使用absolute p
relative、absolute、float
hainiyouni的专栏
01-13 1203
position:relative和position:absolute都可以改变元素在文档流中的位置，设置postion:relative或position:relative都可以让元素激活left、top、right、bottom和z-index属性（默认情况下，这些属性未激活，设置了也无效）。网页虽然看起来是平面的二维结构，但它其实是有z轴的，z轴的大小由z-index控制，默认情况下，所有元
绝对定位和float的区别！
a819465103的博客
12-24 2930
绝对定位和float的区别！
absolute 和float
weixin_30329623的博客
11-22 148
position:absolute与float:left是近亲 包裹性 包裹性换种说法就是让元素inline-block化，例如一个div标签默认宽度是100%显示的，但是一旦被absolute属性缠上，则100%默认宽度就会变成自适应内部元素的宽度 float也是典型的inline-block化元素，这种元素的inline-block化适用于任何水平的标签。例如平时我们要让span标签支持...
absolute float 比较分析
weixin_30515513的博客
12-13 138
同一:absolute-float 都脱离了文档流,也就是默认情况下,父盒子计算高度不包括 absolute/float 的元素 下例: 两个 parentDiv,背景色:深海蓝;边框:1px红色实线;父盒子里面各包含一个 sonDiv ; 第一个 sonDiv 绝对定位,第二个 sonDiv 浮动定位; 两个 parentDiv 都有 margin-bottom: 20px; 方便观察,...
float和absolute的区别
幼儿园编程的博客
01-30 807
float和absolute都会脱离文档流，那二者之间有哪些不同的地方呢？
CSS float与position:absolute布局详解及其选择策略
在网页布局中，CSS的`float`属性和`position: absolute`属性是两种常用的布局技术，它们各有特点，适用于不同的场景。首先，让我们深入了解`float`属性。 `float`属性主要用于控制元素在容器中的水平定位，通常用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值