脱离文档流

脱离文档流是指，该元素脱离了文档中。不再占据默认分配的空间，它下面的元素会上去补位。

可以理解为脱离文档流的元素离开了它的座位，后面的同学可以坐前面，坐它的位置。

但是一般来说脱离文档流分为两种

全脱离文档
半脱离文档

脱离状态	区别
全脱离	补位元素中无论是有图片还是文字，都会全部上去补位
半脱离	补位元素中有图片、文字的，这些图片或者文字会卡在元素周围，形成环绕效果

代码演示

半脱离文档流

半脱离文档流，遇到文字图片时候，补位元素会卡住，形成环绕效果

css

.box1{width: 200px;height: 200px;float: left;background-color: #00B5EE;
}
.box2{width: 200px;height: 200px;background-color: #00FF00;
}

html

<div class="box1"></div>
<!-- 我们写点文字 -->
<div class="box2">麒麟二哥</div>

效果

文字卡住了，验证半脱离文档流

我们再设置一下绿色块的宽度多写几行文字

css

.box1{width: 200px;height: 200px;float: left;background-color: #00B5EE;
}
.box2{/*宽度设置大一点，比200多50 实现全环绕效果*/width: 250px;height: 250px;background-color: #00FF00;
}

html

<div class="box1"></div>
<!-- 我们多写点文字 -->
<div class="box2">
麒麟二哥麒麟二哥麒麟二哥麒麟二哥麒麟二哥麒麟二哥麒麟二哥麒麟二哥麒麟二哥麒麟二哥麒麟二哥麒麟二哥麒麟二哥麒麟二哥麒麟二哥
</div>

效果

全脱离文档流

全脱离文档流，忽略文字图片，补位元素不会被卡住

css

.box1{width: 200px;height: 200px;position: absolute;background-color: #00B5EE;
}
.box2{width: 200px;height: 200px;background-color: #00FF00;
}

html

<div class="box1"></div>
<!-- 我们写点文字 -->
<div class="box2">麒麟二哥
</div>

效果

蓝色块脱离文档流了，绿色块上去补位了，所以绿色快在蓝色块的底下
而且我们观察到，我们设置的文字也是没有用的，绿色盒子补位的时候，不会卡住

脱离文档流和半脱离文档流（详解）相关推荐

java网络编程阻塞_Java网络编程由浅入深三一文了解非阻塞通信的图文代码示例详解...
本文详细介绍组成非阻塞通信的几大类:Buffer.Channel.Selector.SelectionKey 非阻塞通信的流程ServerSocketChannel通过open方法获取ServerSo ...
python字符串format方法参数解释,一文秒懂！Python字符串格式化之format方法详解
一文秒懂!Python字符串格式化之format方法详解一文秒懂!Python字符串格式化之format方法详解 format是字符串内嵌的一个方法,用于格式化字符串.以大括号{}来标明被替换的字符 ...
XML第二讲：格式正规的XML文档、XML文档的元素、属性、实体深度详解
1. 对比XML与HTML下图所示: 从图中可以很好的判断出XML的优越性,XML更能显示出清晰的数据结构信息 2. XML与 HTML的区别 1) 元标记:表示从标记上面就可以描述内容本身是什么,比 ...
一文带你理解云原生 | 云原生全景图详解
关注「开源Linux」,选择"设为星标"回复「学习」,有我为您特别筛选的学习资料~ 1带你了解云原生技术图谱如果你研究过云原生应用程序和相关技术,大概率你遇到过 CNCF 的云原 ...
算法高级（8）-Hystrix实现熔断、限流与服务保护中的算法详解
上一章讲了常见的限流算法,本章我们来看看,Spring Cloud中的Hystrix组件在对请求进行熔断.限流与服务保护操作时的算法实践. 一.雪崩分布式系统环境下,服务间依赖非常常见,一个业务调用 ...
mysql 5.5 主从同步问题_MySQL 5.5 主从复制异步、半同步以及注意事项详解
大纲一.前言二.Mysql 基础知识三.Mysql 复制(Replication) 四.Mysql 复制(Replication)类型五.Mysql 主从复制基本步骤六.Mysql 主从复制 ...
MySQL 5.5 主从复制异步、半同步以及注意事项详解
大纲一.前言二.Mysql 基础知识三.Mysql 复制(Replication) 四.Mysql 复制(Replication)类型五.Mysql 主从复制基本步骤六.Mysql 主从复制 ...
我们公司使用了 5 年的系统限流方案 ,从实现到部署实战详解，稳的一B
前言最近几年,随着微服务的流行,服务和服务之间的依赖越来越强,调用关系越来越复杂,服务和服务之间的稳定性越来越重要.在遇到突发的请求量激增,恶意的用户访问,亦或请求频率过高给下游服务带来较大压力时, ...
串口流控（CTS/RTS）使用详解
1.流控概念在两个设备正常通信时,由于处理速度不同,就存在这样一个问题,有的快,有的慢,在某些情况下,就可能导致丢失数据的情况. 如台式机与单片机之间的通讯,接收端数据缓冲区已满,则此时继续发送来的 ...

脱离文档流和半脱离文档流（详解）

脱离文档流

代码演示

脱离文档流和半脱离文档流（详解）相关推荐

最新文章

热门文章