position:absolute和float属性的异同？

最新推荐文章于 2024-07-09 15:21:50 发布
原创 最新推荐文章于 2024-07-09 15:21:50 发布 · 848 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css: float和absolute 的区别

本文对比了CSS中float与position:absolute两种布局方式的相同点与不同之处。共同点在于它们都可以使内联元素脱离文档流并能设定宽高。区别在于float仍然占据位置，而absolute则完全覆盖原有文档流中的元素。

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

问题网址 : http://bbs.daxiangclass.com/?thread-338.htm

position:absolute和float属性的异同？

共同点：对内联元素设置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
关于css float 属性以及position:absolute 的区别。
weixin_30559481的博客
05-25 173
1.float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。div一个典型的块级元素，会单独占据一行。 先看看最基本的块级元素如何排列的。html代码，以下样式都是基于此。 <div class="boxBg"> <div class...
position:absolute和float属性的异同
chenxiaodage的博客
10-08 808
共同点：对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。 不同点：float仍会占据位置，absolute会覆盖文档流中的其他元素。
CSS 布局属性详解：position:absolute 与 float 的异同
最新发布
My_wife_QBL的博客
07-09 909
CSS 布局属性是指用于控制 HTML 元素在页面中位置和排列方式的属性。常见的布局属性包括positionfloatdisplay等。本文将重点介绍和float这两个属性。left: 20px;：将元素设置为绝对定位。topleftbottomright：用于指定元素相对于其定位祖先元素的位置。float.element {/* 或 float: right;*/：使元素向左浮动。：使元素向右浮动。
Transformer中Relative Position Bias以及DropPath细节梳理
AmibitionWei的博客
07-20 3293
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）是用于创建网页结构的标记语言。它...
关于浮动float属性和position:absolute属性的区别
baguangkui4924的博客
04-11 221
最近返回头看了很多书籍，一直在纠结float属性和absolute绝对定位的区别和使用的情况，给大家分享一下自己的心得和体会吧。 1，float属性 float属性意义是让元素拜托独占一行的霸道总裁，成为一个普普通通的人。比如下面这个例子 如图，我们为第一个盒子第一个盒子设置了float：left属性，他也就失去了霸道总裁独占一行的特点，下面的盒子就上位。 但是我们发现一个问...
绝对定位absolute和浮动定位float的异同
weixin_34184561的博客
04-06 1081
元素定位的方式 absoute和float的异同 1、元素定位的方式主要有以下几种： absolute:生成绝对定位的元素， 相对于最近一级的定位不是 static 的父元素来进行定位。 fixed（老IE不支持）：生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。 relative：生成相对定位的元素，相对于其在普通流中的位置进行定位。 static：默...
css定位中position:absolute与float的区别
kbx8916的博客
07-05 540
position:absolute 设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 float情况下 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为
绝对定位和float的区别！
a819465103的博客
12-24 2929
绝对定位和float的区别！
position: absolute和 float详解
weixin_40925093的博客
06-14 1213
position: absolute 首先我们先来说一下position属性，这是一个元素定位的属性，它的取值分别有absolute、fixed、relative、static、inherit等，我们先来简单说明一下各个取值的作用。 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过
CSS基础--float的兄弟position:absolute一
chujinmaolu的博客
11-17 316
当absolute和float同时存在的时候，float属性是无任何效果的。元素一旦position属性值为absolute或fixed，其display计算值就是block或者table。，absolute有一个平时不太被人注意的差异，那就是absolute的自适应性最大宽度往往不是由父元素决定的，本质上说，这个差异是由“包含块”的差异决定的。换句话说，absolute元素具有与众不同的“包含块” 1、absolute的包含块 （1）根元素（很多场景下可以看成是）被称为“初始包含块”，其尺寸等同于浏览器可
css中的position:absolute和float和disply:inline-block
心中有侠
07-11 1149
          今天复习了一些关于布局的内容，由于之前做的东西很少，并且没有仔细研究过，所以出现好多问题。 我发现position:absolute和float是有相似之处的，所以很迷惑，到底怎么布局好呢？ 所以上网搜索了一下关于它们两个的内容，发现有一个作者讲的很好，把float讲的很透彻。 所以模仿他，整理一下心得体会。         一、position：ab...
个人浅谈 float 和 position absolute
qq_38096598的博客
07-30 390
float: 元素从网页的正常流动(文档流)中移除,但会保持元素的‘容器’大小，置于元素的最左边或最右边（即保留部分的流动性，未完全脱离文档流） .content { margin: 100px auto; width: 300px } .box { float: left } <div class="content"> <div class="box" ><img src="https://himg.bdimg.com/sys/portraitn/item/72
float属性与position(定位)属性的区别
joker的博客
11-23 858
float属性 先来了解一下block元素和inline元素在文档流中的排列方式。 block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性； inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随...
脱离文档流之 float 和 position:absolute的区别
加油~么么哒~~
02-20 6362
所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。脱离文档流即是元素打乱了这个排列，或是从排版中拿走。 脱离文档流的元素有个标志：没有实际高度。 脱离文档流的元素都
CSS float与position:absolute布局详解及其选择策略
在网页布局中，CSS的`float`属性和`position: absolute`属性是两种常用的布局技术，它们各有特点，适用于不同的场景。首先，让我们深入了解`float`属性。 `float`属性主要用于控制元素在容器中的水平定位，通常用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值