float与position间的区别
float与position间的区别：
个人理解为：脱离文档流不一定脱离文本流；但脱离文本流，则也脱离文档流。【如有更好的理解还望评论区一起探讨，共同学习进步】
一、float 浮动(脱离文档流，不脱离文本流)
float的两种功能作用：
a.元素脱离文档流，但不脱离文本流。(即：该元素区域浮动起来，但是处于元素里面的文本信息不会脱离文档)
b.当行内元素使用float浮动时，类似于将该元素设置为行内块级元素，可以为其设置宽高并在一行显示。
示例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动与定位小区别</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
}
.one{
float: left;
/*position: absolute;*/
background: #bfe;
margin-top: 40px;
}
.two{
/*珊瑚色*/
background: coral;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two">浮动文档流测试</div>
</body>
</html>
二、position 定位(脱离文档流也脱离文本流)【相关position知识前面随笔有提及，这里使用absolute为例】
position:absolute; 绝对定位；脱离文本流，不保留原来的位置空间。
示例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动与定位小区别</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
}
.one{
/*float: left;*/
position: absolute;
background: #bfe;
margin-top: 40px;
}
.two{
/*珊瑚色*/
background: coral;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two">相对定位文本流测试</div>
</body>
</html>
三、float 浮动 【父元素float浮动对子元素float浮动产生的影响】
说明：当父元素定义为float时，其是脱离文档流的，但当其子元素再设置为float浮动时，子元素只会含有
float的另一功能，将行内元素【内联元素】转化为行内块级元素，而且脱离文档流的特性不会显现出来。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width: 400px;height:200px;background:cyan;">
<span style="float:left;width: auto;height:100%;background:coral;">
<i style="background: #bfe;float: left;width: 100px;">hello world</i>
</span>
</div>
</body>
</html>
float与position间的区别的更多相关文章
- 脱离文档流两操作，float和position:absolute的区别
文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行,内联元素不独占一行: CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离 ...
- 关于css float 属性以及position:absolute 的区别。
1.float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.div一个典型的块 ...
- float和position谁好？
float从字面上的意思就是浮动,float能让元素从文档流中抽出,它并不占文档流的空间,典型的就是图文混排中文字环绕图片的效果了.不过需要注意的是清除浮动是我们可能需要注意的地方.而position ...
- CSS 中，用 float 和 position 的区别是什么？
CSS 中,用 float 和 position 的区别是什么? 呃,其实这个命题有误,只有position才是定位,float不能说是定位,不过你可以说这两种布局方式有什么不同.float和posi ...
- float和position:absolute脱离文本流的区别
float和position:absolute脱离文本流的区别原创 paediatrician 最后发布于2016-09-19 10:43:05 阅读数 5375 收藏展开 文档流:将窗体自上而下分成 ...
- CSS 盒子模型及 float 和 position
## CSS和模型 ##CSS盒模型本质上是一个盒子,封装周围的 HTML 元素,包括 外边距(marign),边框(border),填充(padding),内容物(content) 盒子模型的类型: ...
- CSS传统布局之display属性+float属性+position属性
这三个属性是传统网页布局中经常用到的属性. 读这篇文章之前,希望你对css布局模型已经有了一定的了解.因为本文的三个属性是和css三个布局模型紧密联系在一起的.因此,如若你并不了解,我推荐你先看一下c ...
- css里面position:relative与position:absolute的区别
position:absolute这个是绝对定位:是相对于浏览器的定位.比如:position:absolute:left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览 ...
- array_unique和array_flip 实现去重间的区别
array_unique和array_flip 实现去重间的区别 php有内置函数array_unique可以用来删除数组中的重复值, phperz~com (PHP 4 >= 4.0.1, ...
随机推荐
- 【Python】解析Python中类的使用
目录结构: contents structure [-] 类的基本使用 专有方法 继承 单重继承 多重继承 砖石继承 1.类的基本使用 下面是类使用的一个简单案例, class person: &qu ...
- Windows 10提示你不能访问此共享文件夹，因为你组织的安全策略阻止未经身份验证的来宾访问
Windows 10提示你不能访问此共享文件夹,因为你组织的安全策略阻止未经身份验证的来宾访问 1.首先按window+R键打开运行.如下图 2.在运行中输入“gpedit.msc”来启动本地组策略编 ...
- Session覆盖测试(要验证码提交到后续页面操作的 绕过去的场景)
测试原理和方法 找回密码逻辑漏洞测试中也会遇到参数不可控的情况,比如要修改的用户名或者绑定 的手机号无法在提交参数时修改,服务端通过读取当前session会话来判断要修改密码的账 号,这种情况下能否对 ...
- java concurrent并发包使用
package cn.com.zxf.atomic; import java.util.concurrent.atomic.AtomicInteger; public class AtomicExam ...
- React 使用 if else 判断语句
今天在写 React 时,在 render 的return中既然不能使用if判断语句,所以就整理一些在react中使用if 的方式,可根据自己的实际情况选择: 方式一: class LLL exten ...
- VS2017/VS 2019查看源代码
通过VS2017/VS 2019使用F12 查看DLL源代码 今天在一本书中偶然看到原来VS2017中是可以查看dll中的源码,具体步骤是:工具>选项>文本编辑器>c#>高 ...
- Ubuntu搭建交叉编译开发环境
在Linux驱动开发过程中,往往需要搭建交叉编译开发环境,其中,最重要的环节就是安装交叉编译工具链,本文介绍如何在Ubuntu下搭建交叉编译开发环境. 1.官网下载交叉编译工具链 链接如下: http ...
- WPS应用技巧
打开云文档的文件:文件-打开-我的云文档 (选择时的文档为PDF时仅扫描PDF文件)
- kafka的分区
分区会均匀的分配到不同的broke上,即不同的机器上.
- tensorflow-笔记02
TensorFlow扩展功能 自动求导.子图的执行.计算图控制流.队列/容器 1.TensorFlow自动求导 在深度学习乃至机器学习中,计算损失函数的梯度是最基本的需求,因此TensorFlow也原 ...