css中绝对定位和浮动的异同

最新推荐文章于 2021-09-28 23:33:05 发布
最新推荐文章于 2021-09-28 23:33:05 发布
阅读量732 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kbx8916/article/details/52204287
版权


相同点:

css中绝对定位和浮动的元素都会生成一个块级元素，而不论原来该元素是什么类型。


绝对定位和浮动都是脱离文档流的，文档中的普通流中的块框表现的像 绝对定位 或 浮动元素不存在一样。


不同点:

在处理行框的时候，浮动元素周围的行框被缩短，可以形成文字围绕浮动框的情况。

对于绝对定位的元素这不然，绝对定位的元素会覆盖文字。


浮动元素

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。


eg：

代码:

<style>
img
{
vertical-align:top;
position:absolute;
}
p
{
background-color:yellow;
height:300px;
}
</style>
</head>


<body>
<p>this is okok i love babamama everything will be ok this is okok i love babamama everything will be ok this is okok i love babamama everything will be ok this is lib  i love babamama everything will be ok this is lib<img src="12.jpg" width="200px" height="200px">
o i love babamama everything will be ok this is okok i love babamama everything will be ok this is okok i love babamama everything will be ok this is okok i love babamama everything will be ok this is okok i love babamama everything will be ok this is okok i love babamama everything will be ok this is okok i love babamama everything will be ok this is okok i love babamama everything will be ok this is okok i love babamama everything will be ok this is okok i love babamama everything will be ok this is okok i love babamama everything will be ok this is okok i love babamama everything will be ok this is okok i love babamama everything will be ok this is okok i love babamama everything will be ok this is okok i love babamama everything will be ok this is okok i love babamama everything will be ok this is okok i love babamama everything will be ok this is okok i love babamama everything will be ok</p>
</body>


当img的为:posittion:absolute时，




当img为float:left时，



当img为posittion:relative时




kbx8916
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3知识点归纳
07-26
- CSS中的标签大致可以分为块级元素和内联元素两大类。 - **块级元素**（如`<div>`、`<p>`）默认占据一行空间。 - **内联元素**（如`<span>`、`<a>`）与其他元素在同一行显示，不独占空间。 #### 背景 - **背景图片...
前端大厂最新面试题-css.docx
06-06
63. 绝对定位（absolute）和浮动（float）有哪些异同，绝对定位是让元素脱离正常流，而浮动是让元素浮动在正常流上。 64. @font-face是一种CSS语法，用于定义字体。 65. 字体风格（font-style）有两个关键字，分别...
CSS布局，解析弹性布局、绝对定位、浮动的异同
weixin_48323090的博客
07-11 1658
1、弹性布局flex flex布局表示弹性布局，为盒字模型提供最大的灵活性。 .red_box{ background-color: red; height: 200px; width: 600px; display: flex; } .yellow_box1{ background-color:yellow; width: 200
CSS布局：浮动与绝对定位的异同点
cherry_vicent的专栏
12-14 4459
浮动 ( float ) 和绝对定位 ( position:absolute ) 相同点：（1）都是漂起来( 离开原来的位置 ) （2）并且都不占着原来的位置 不同点：float后，它后面的对象，
css 浮动 相对定位 绝对定位区别
paullinjie的博客
08-17 342
html是按照文件流（普通流）的方式加载的，但是全部是普通流的话，很多好看的样式是实现不了的，所以出现了浮动，相对定位，绝对定位的概念。 　　一、首先，按照普通流和非普通流来分类： 　　　　①普通流：就是按照上下左右的顺序一行一行排列的，长度不够就会自动挤到下一行。 　　　　②非普通流：顾名思义就是脱离普通流的，在普通流上面是不占据位置的。css有position的样式，posi
绝对定位、相对定位、固定定位特点
micoria的博客
01-21 4653
一、定位 1、定位的定义 某个元素可以自由地在盒子上面移动，并且可以压着其他元素 当滚动窗口时，某个元素可以固定在页面上 可以让盒子自由的在某个盒子上进行移动并且可以压住其他盒子，或者可以在屏幕上固定在页面上。 2、组成 定位=定位模式+边偏移 定位模式（position） 制定一个元素在文档中的定位方式 定位模式 描述 static 静态定位 relative 相对定位 absolute 绝对定位 fixed 固定定位 边偏移（方位名词） 据定了元素的最终位置
前端布局之定位布局、浮动布局的理解
qq_35770800的博客
09-18 1226
css的基本布局、定位布局、浮动布局 1.1.基本布局 标准文本流 标准流指的是在不使用其他的与排列和定位相关的特殊CSS规则时，各种元素的排列规则。网页在解析的时候，遵循于从上向下，从左向右的一个顺序，这个顺序就是来源于标准文本流。 标准文本流等级森严,标签分为两种等级：块级元素和行内元素。 块级元素总是以块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右自动伸展，直到包含它的元素...
css-8.4-定位
QWH_PYTHON的博客
09-24 304
css-8.4-定位一：relative：相对定位二：absolute：绝对定位三：fixed：固定定位四：使用定位实现元素的绝对居中五：z-index1、z-index的作用2、z-index的使用要求3、z-index:auto 和 z-index:0 的异同4、z-index相同（处于同一平面的定位元素）的层叠关系 定位 1.定位与浮动一样，都是改变元素在正常文档流中的位置，对网页内容进行...
CSS之float浮动布局
o_535Ovo的博客
09-28 704
css之float浮动布局 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 1. 浮动示例 如下图，把框1向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘： 再请看下图，当框 1向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2从视图中消失。 如果把所有三个框都向左移动，那
定位和浮动
qq_35267127的博客
12-07 98
定位和浮动 定位(position) 什么是定位 能把元素定在屏幕的任意位置，该元素脱离文档流。 `` 什么是文档流 文档流指的是元素排版布局过程中，元素会自动从左往右，自上而下的流式布局。 (一) relative (相对定位) 相对定位的元素相对于自身偏移 相对定位的元素不会脱离文档流 (二) absolute (绝对定位) 使元素完全脱离文档流； 相对...
相对定位和绝对定位
虚哥的技术备忘录
07-25 311
前言：关于定位的三种方式，已有很多说明，这里只是简单记录一下三种定位方式的异同，以及绝对定位的常用方法和相关知识。1、三种定位方式的异同 相对定位 绝对定位 固定定位 相对于原来的位置定位 见下面 相对于浏览器窗口定位 没有脱离文档流 脱离文档流 脱离文档流 2、绝对定位的三种情况 如果该元素没有父元素，则相对于body定位。 如果有父元素，但父元素没有定位，还是相
javascript textContent与innerText的异同分析
10-28
这意味着在Firefox中，`textContent` 不会像`innerText`那样处理` `标签和CSS样式的影响。 举例来说，假设有一个`div`元素，其中包含嵌套的`div`，并在内嵌`div`中有一个浮动样式。在IE中，`innerText`会根据CSS...
前端标准在各浏览器中的差异
06-05
创建BFC的常见方法包括浮动元素、绝对定位元素、`display: inline-block`、`table-cell`、`table-caption`以及设置`overflow`属性为非`visible`值的元素。 ##### `hasLayout`与`BFC`异同分析 1. **浮动元素的处理*...
详细分析css float 属性以及position:absolute 的区别
10-25
相信很多人都有这样的问题，在页面布局中float和position:absolute哪个更好用呢？既然是布局，就用float好，这个我比较常用。这个浮动是可以清除的，一般不会影响整体布局。而position，定位，是不受约束的，这个...
qt练习控件label控件-lineEdit控件样例代码
最新发布
07-30
qt练习控件label控件-lineEdit控件样例代码
【JCR一区级】麻雀搜索算法SSA-CNN-LSTM-Attention故障诊断分类预测【含源码 5689期】.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-LSTM-Attention分类系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Attention分类 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Attention分类 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Attention分类 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Attention分类 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Attention分类
详解MATLAB Simulink通信系统建模与仿真
07-30
第1 章 MATLAB 基础与通信系统仿真 1.1 MATLAB 简介 1.2 MATLAB 程序设计 1.3 通信系统仿真 第2 章 Simulink 仿真基础 2.1 Simulink 简介 2.2 Simulink 工作环境 2.3 Simulink 仿真的基本方法 2.4 创建自己的模块库 2.5 S-函数的编写 第3 章 通信信号与系统分析 3.1 离散信号和系统 3.2 Fourier 分析 3.3 带通信号的低通等效 3.4 随机信号分析 第4 章 信道 4.1 加性高斯白噪声信道 4.2 多径衰落信道 第5 章 模拟调制 5.1 幅度调制 5.2 角度调制 第6 章 数字基带传输 6.1 概述 6.2 二进制基带信号传输 6.3 基带PAM 信号传输 6.4 带限信道的信号传输 第7 章 数字信号载波传输 7.1 概述 7.2 载波幅度调制（PAM） 7.3 载波相位调制（PSK） 7.4 正交幅度调制（QAM） 7.5 载波频率调制（FSK） 第8 章 信道编码和交织 8.1 概述 8.2 线性分组码
SCI一区】淘金算法GRO-CNN-BiLSTM-Mutilhead-Attention多变量时序预测含源码 5642.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-BiLSTM-Mutilhead-Attention回归预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.5 萤火虫算法FA/差分算法DE-CNN-BiLSTM-Mutilhead-Attention回归预测
DivCSS布局绝对定位和浮动详细代码
05-05
绝对定位布局代码： ```html <!DOCTYPE html> <title>Absolute Positioning <style type="text/css"> .container { position: relative; border: 1px solid #000; height: 300px; width: 500px; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值