浮动和绝对定位的异同

最新推荐文章于 2025-09-04 16:51:32 发布

weixin_34381687

最新推荐文章于 2025-09-04 16:51:32 发布

阅读量146

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/u/1992917/blog/362552

2019独角兽企业重金招聘Python工程师标准>>>

相同点：

1、包裹性：用了浮动或绝对定位的容器，脱离了文档流，其占据的宽度，不再是父容器的宽度，而是它包裹的内容的宽度。

2、破环形：用了浮动或绝对定位的元素，脱离了文档流，其高度，不会算在父容器的高度里，因此，会撑破父容器。

不同点：

1、绝对定位可以摆脱父容器overflow的束缚，而float不能

2、用了绝对定位的元素，再用浮动是没有效果的

转载于:https://my.oschina.net/u/1992917/blog/362552

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34381687

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

HTML和CSS常见面试题

手掌日月摘星辰

05-28

3013

一、HTML和CSS 21 0.请列举出清除浮动的几种方式（最少三种) ......................................................................................1 1. 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?..................................1 2. 每

前端面试题之html和css

念念不忘的博客

06-12

806

1、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? IE: trident 内核 Firefox：gecko 内核 Safari:webkit 内核 Opera:以前是 presto 内核，Opera 现已改用 Google Chrome 的 Blink 内核 Chrome:Blink(基于 webkit，...

参与评论您还未登录，请先登录后发表或查看评论

绝对定位和浮动的区别和运用

iteye_1435的博客

11-07

358

当一个元素使用绝对定位后，它的位置将依据浏览器左上角开始计算或相对于父容器（在父容器使用相对定位时）。 绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就当绝对定位的元素不存在时一样。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素...

浮动和绝对定位的区别

weixin_30575309的博客

01-07

148

先看看w3c关于浮动float和绝对定位absolute的讲解： float：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 absolute：设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档...

二十三，绝对定位与浮动

好多可乐的博客

12-16

262

绝对定位（absolute）于浮动(float)的对比：相同点：都会产生浮动，都会破坏文档流不同点：float定位后，文档流其他文档会被绕开，不会被遮挡。 绝对定位会覆盖其他内容截图是float的演示效果（如果是相对定位，就直接部分文字被覆盖了） <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .main{

CSS定位六：绝对定位和浮动的区别

小枯林的博客

12-26

2313

疑问：前面发现，绝对定位可以使div脱离标准文档流，产生浮动的效果；而以前接触的浮动（float）也可以让div脱离标准文档流，产生浮动的效果；这二者都可以让div脱离文档流，产生浮动效果，那么这二者的区别是？实际中到底用哪个？ 绝对定位和浮动的区别相同点：都会破坏文档流，都会产生浮动；不同点：浮动时：文档流的其他内容不会忽略浮动的位置，其他内容会绕开； 绝对定位时：文档...

标准流、浮动定位流流、三种不同的定位机制？

weixin_46391474的博客

03-01

274

标准流、浮动定位流流、三种不同的定位机制？在css中有三种基本的定位机制，它们分别是标准文档流、浮动流和定位流，那它们三者之间有什么相互作用呢？我现在分析一下它们各自的用处，在标准文档流中，网页解析的时候会遵循一个从上往下，从左到右的一个解析过程，我们可以把它理解为是一个标准流的过程；浮动流是在网页解析的过程中，元素显示的结果会是显示在父级元素的最左或者是最右边，它显示顺序遵循的并不是从上到下或...

在web中相对定位和绝对定位有什么区别

06-27

3.粘性定位（sticky）和固定定位（fixed）与绝对定位有何异同？4.在什么情况下绝对定位元素会相对于视口定位？</think>### 相对定位（position: relative）与绝对定位（position: absolute）的区别 #### 1. **定位...

2023 前端开发 HTML CSS 宝典：浮动和定位特性探索

HTML 和 CSS 基础回顾 HTML 和 CSS 是前端开发中至关重要的两个技术，下面我们来回顾它们的基础知识。 ## 1.1 HTML 标记语言简介与基本结构 HTML（HyperText Markup Language）是用于创建网页结构的标记语言。它...

BFC 和 IFC 机制

07-12

- 绝对定位元素（`position`为`absolute`或`fixed`） - `display`值为`inline-block`、`table-cell`、`table-caption`、`flex`、`inline-flex`、`grid`、`inline-grid`等 - `overflow`值不为`visible`的块元素 - `...

CSS布局：浮动与绝对定位的异同点

cherry_vicent的专栏

12-14

4537

浮动 ( float ) 和绝对定位 ( position:absolute ) 相同点：（1）都是漂起来( 离开原来的位置 ) （2）并且都不占着原来的位置不同点：float后，它后面的对象，

CSS绝对定位和浮动的区别和运用

brancepeng的专栏

03-30

696

一切皆为框 div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。您可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 <a> 元素）表现得像块...

html浮动和相对定位,浮动与相对定位、绝对定位的区别

weixin_42629522的博客

06-07

809

浮动与相对定位、绝对定位的区别最近学校的HTML课程在讲浮动和定位。为了搞清楚这些样式的区别，也是查了不少资料在这里来谈谈我对浮动与相对定位、绝对定位的理解一、浮动浮动的使用场景：一般是将竖起来的多个div进行横向的排列浮动的负面作用：因为添加了浮动就脱离了标准文档流，有可能导致父元素无法被撑开示例如下：在一个div中定义2个div并设置为float：leftrTitle.box{width:...

绝对定位absolute和浮动定位float的异同

weixin_34184561的博客

04-06

1088

元素定位的方式 absoute和float的异同 1、元素定位的方式主要有以下几种： absolute:生成绝对定位的元素，相对于最近一级的定位不是 static 的父元素来进行定位。 fixed（老IE不支持）：生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。 relative：生成相对定位的元素，相对于其在普通流中的位置进行定位。 static：默...

绝对定位和float的区别！

a819465103的博客

12-24

2933

绝对定位和float的区别！

html的浮动跟标准流,网页布局的标准流浮动流与定位流

weixin_28815535的博客

07-08

823

一网页布局方式#1、什么是网页布局方式布局可以理解为排版，我们所熟知的文本编辑类工具都有自己的排版方式，比如word，nodpad 等等而网页的布局方式指的就是浏览器这款工具是如何对网页中的元素进行排版的#2、网页布局/排版的三种方式2.1、标准流2.2、浮动流2.3、定位流二标准流标准流的排版方式，又称为：文档流/普通流，所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下...

Java 和 Python 的执行方式有很大不同——Android学习

最新发布

ban102055的博客

09-04

2668

特性PythonJava执行方式(解释执行)->(先编译后执行)是否需要编译否是环境需要 Python 解释器需要JDK(包含javac和java在Android Studio中不适用全自动，点击“Run”即可给你的建议：为了学习 Android 开发：直接使用。不要担心命令行，IDE 会帮你处理一切。专注于编写代码和理解 Android 的概念（如 Activity、生命周期）。为了单纯学习 Java 语法。

css的浮动和绝对定位

03-04

### CSS Float 和 Position Absolute 的使用方法与差异 #### 使用方法 ##### Float 属性 Float 是一种用于控制元素如何与其他内容排列的方式。当应用 `float` 属性时，元素会尽可能地移动到容器的左侧或右侧，并让其他非浮动的内容环绕它[^1]。 ```css div { width: 200px; height: 200px; border: 2px solid black; float: left; /* 向左浮动 */ } ``` 上述代码展示了如何创建一个宽度为200像素、高度也为200像素并带有黑色边框的 `<div>` 元素，并将其设置为向左浮动[^2]。 ##### Position Absolute 属性 Absolute 定位允许将元素相对于最近已定位（即设置了 position 值不是 static 的）祖先元素进行精确放置。如果没有任何这样的父级，则基于初始包含块（通常是视口）。这使得绝对定位非常适合于需要精确定义位置的情况[^4]。 ```css div.absolute { position: absolute; top: 10%; left: 20%; width: 150px; height: 150px; background-color: green; } ``` 这段样式定义了一个绿色背景的小方块，距离页面顶部10%，左边20%的位置显示出来。 #### 差异对比 - **文档流影响** - 浮动元素仍然存在于标准文档流中，但是它们的行为类似于被移除了一样，因为后续兄弟节点可能会围绕着这些浮动对象流动[^3]。 - 绝对定位完全脱离了正常的文档流，这意味着即使有空间存在，也不会有任何其他元素尝试填充由绝对定位留下的空白区域。 - **布局行为** - 对于浮动来说，默认情况下同一行可以容纳多个浮动盒子直到没有足够的水平空间为止；而绝对定位则总是独立处理每个元素而不考虑周围的环境。 - **清除机制需求** - 当使用浮动能造成一些意想不到的效果比如父容器塌陷等问题时，可能需要用到 clear 或 overflow:hidden 来解决这些问题。 - 而对于绝对定位而言，由于其已经离开了正常文档流，因此通常不需要特别关注这一点。综上所述，在选择使用哪种技术之前应该仔细评估具体应用场景的需求以及预期的结果是什么样的。