CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别
1、代码
（1）示例代码1
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别</title>
<style type="text/css">
.left {
width: 300px;
height: 500px;
background: red;
float: left;
} .right {
height: 500px;
background: blue;
}
</style>
</head> <body>
<div class="left">111</div>
<div class="right">222</div>
</body> </html>
（2）示例代码2
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别</title>
<style type="text/css">
.left {
width: 300px;
height: 500px;
background: red;
position: absolute;
} .right {
height: 500px;
background: blue;
}
</style>
</head> <body>
<div class="left">111</div>
<div class="right">222</div>
</body> </html>
2、结论：
使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。
而对于使用absolute :position脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。
CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别的更多相关文章
- CSS中的ul与li样式详解
CSS中的ul与li样式详解ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style-type属性.list-style-image属性.li ...
- 基于JavaSE阶段的IO流详解
1.IO流基本概述 在Java语言中定义了许多针对不同的传输方式,最基本的就是输入输出流(俗称IO流),IO流是属于java.io包下的内容,在JavaSE阶段主要学下图所示的: 其中从图中可知,所有 ...
- SQL 中详解round(),floor(),ceiling()函数的用法和区别？
SQL 中详解round(),floor(),ceiling()函数的用法和区别? 原创 2013年06月09日 14:00:21 摘自:http://blog.csdn.net/yueliang ...
- BRD——>MRD——>PRD，产品经理三大文档概念详解及前后逻辑
转自:https://blog.csdn.net/neikutaixiao/article/details/40819445 商业需求文档Business Requirement DocumentBR ...
- CSS属性：定位属性（图文详解）
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. CSS的定位属性有三种,分别是绝对定位.相对定位.固定定位. posit ...
- Spring Cloud Zuul 限流详解（附源码）（转）
在高并发的应用中,限流往往是一个绕不开的话题.本文详细探讨在Spring Cloud中如何实现限流. 在 Zuul 上实现限流是个不错的选择,只需要编写一个过滤器就可以了,关键在于如何实现限流的算法. ...
- Spring Cloud限流详解
转自:https://blog.csdn.net/tracy38/article/details/78685707 在高并发的应用中,限流往往是一个绕不开的话题.本文详细探讨在Spring Cloud ...
- Spring Cloud(十二)：Spring Cloud Zuul 限流详解（附源码）（转）
前面已经介绍了很多zuul的功能,本篇继续介绍它的另一大功能.在高并发的应用中,限流往往是一个绕不开的话题.本文详细探讨在Spring Cloud中如何实现限流. 在 Zuul 上实现限流是个不错的选 ...
- web前端学习（四）JavaScript学习笔记部分（5）-- 事件流详解
1.JS事件详解-事件流 1.1.事件流 1.事件流: 描述的是在页面中接受事件的顺序 2.事件冒泡: 由最具体的元素接收,然后逐级上传播至最不具体的节点(文档) 3.事件捕获: 最不具体的节点先接收 ...
随机推荐
- 修改npm仓库地址
在C:\Users\Administrator文件夹下找到.npmrc 添加registry = http://registry.cnpmjs.org淘宝镜像地址,保存
- SPOJ 10628. SPOJ COT Count on a tree 可持久化线段树
这题是裸的主席树,每个节点建一棵主席树,再加个lca就可以了. 历尽艰辛,终于A掉了这一题,这般艰辛也显示出了打代码的不熟练. 错误:1.lca倍增的时候i和j写反了,RE了5次,实在要吸取教训 2. ...
- Codeforces Beta Round #5 B. Center Alignment 模拟题
B. Center Alignment 题目连接: http://www.codeforces.com/contest/5/problem/B Description Almost every tex ...
- SqlServer Base64解码中文
最近在做一个和拥有TurboCRM相关的项目,其中需要取出客户信息的联系人字段,经过查看,这个字段在存入时用Base64加密过了 这个功能在应用层实现是很方便的,但是由于一些特殊原因,只能放到SqlS ...
- 典型案例收集-OpenVPN不同网段的访问控制（转）
一.案例1 针对不同的客户端指定不同的等级和权限. 通常的方法是: 1.每个客户端分配不同的IP地址: 2.利用防火墙对不同的IP地址进行控制: 例如: 1.公司内部网段是10.66.4.0/24: ...
- 借助Maven为项目划分development，test，production环境
原文地址:http://melin.iteye.com/blog/1339060 很早学习rails的时候,rails在服务器启动的时候,通过参数可以切换不同运行环境.也许spring从rails吸取 ...
- Sound.loadCompressedDataFromByteArray
前不久Adobe发布了Flash Player 11的release版本, Flash Player 11 带来了很多新特性, 最最红火的就是Stage3D了,但是这里讲的是这个版本的另一个新特性, ...
- ConnectivityManager详解
常用方法: 1.监听网络连接(Wi-Fi, GPRS, UMTS, etc),当网络发生改变时发送广播(broadcase)进行通知 2.通过该类查询网络连接状态 常用方法: getActiveNet ...
- The application’s PagerAdapter changed the adapter’s contents without calling PagerAdapter#notifyDa
错误原因是在于修改了PageAdapter,却没有调用 PageAdapter的nodifyDataSetChanged方法.注意刷新数据 需要在主线程. 今天在做项目时出现了这个问题,一直报没有调用 ...
- OpenShift 容器日志和应用日志分离问题
一般来说应用日志和容器日志一样输出到console,这样oc logs的时候就能把所有的获取到,但这种模式下输出的日志比较多,问题定位不方便,更多的时候开发人员只想通过应用日志来查看定位问题就够了,所 ...