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, ...
随机推荐
- mstar 平台I2C 配置
芯片的pin 脚可以用作不同的功能,总结一句就是外设进行状态和数据交换. 最常用的是作为GPIO,设置为输出模式时,通过高低电平来控制一些外围设置:// 如LED,屏的电源,背光的开关,功放的静音等等 ...
- linux驱动由浅入深系列:高通sensor架构实例分析之三(adsp上报数据详解、校准流程详解)【转】
本文转载自:https://blog.csdn.net/radianceblau/article/details/76180915 本系列导航: linux驱动由浅入深系列:高通sensor架构实例分 ...
- git 相关流程和报错解决
git 相关流程: 预先配置: gitroot $ git config user.name XXXgitroot $ git config user.email XXX@XXX.com git re ...
- [转]怎样与 CORS 和 cookie 打交道
原文地址:https://segmentfault.com/a/1190000018756960 前言 CORS 与 cookie 在前端是个非常重要的问题,不过在大多数情况下,因为前后端的 doma ...
- 【翻译】FlinkCEP-Flink的复杂事件处理
本文翻译自官网:FlinkCEP - Complex event processing for Flink FlinkCEP是在Flink之上实现的复杂事件处理(CEP)库. 它使您可以检测无穷无尽的 ...
- VM无法正常使用桥接模式获取IP上网
问题: 有时候会遇到VM使用桥接模式时无法正常获取IP的情况 原因: 初步怀疑是因为你的电脑是双网卡 解决方法: 这时候,就需要修改VM的虚拟网络编辑器的配置 解决步骤: 编辑->虚拟网络编辑器 ...
- 消息中间件 kafka rabbitmq 选型差异
https://www.zhihu.com/question/43557507 https://baijiahao.baidu.com/s?id=1610644333184173190&wfr ...
- 启动Oracle 12c数据库实例
启动Oracle 12c数据库实例 启动Oracle数据库实例,主要分为两步:第一步,启动监听:第二步,启动数据库实例. 1. 切换到oracle用户- su oracle- cd - source ...
- 【Spring Cloud学习之三】负载均衡
环境 eclipse 4.7 jdk 1.8 Spring Boot 1.5.2 Spring Cloud 1.2 主流的负载均衡技术有nginx.LVS.HAproxy.F5,Spring Clou ...
- Docker---数据卷Volume的简单使用(使用DockerFile实现)
DockerFile是什么?Dockerfile是由一系列命令和参数构成的脚本,这些命令应用于基础镜像并最终创建一个新的镜像.它们简化了从头到尾的流程并极大的简化了部署工作.Dockerfile从FR ...