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.事件捕获: 最不具体的节点先接收 ...
随机推荐
- JZYZOJ1311 邮局设置问题 dp
易得每两个点之间建立邮局的最好位置为两点最中间的点,两点之间如果没有奇数个数的点则中间两个点都可以...(自己画一下图可以看出随着右边点的增大最佳点的增大非常平滑...强迫症一本满足) w[i][ ...
- [BZOJ1032][P1840] 祖玛 记忆化搜索 动态规划
描述 Description 某天,小x在玩一个经典小游戏——zumo.zumo游戏的规则是,给你一段长度为n的连续的彩色珠子,珠子的颜色不一定完全相同,但是,如果连续相同颜色的珠子大 ...
- 【8.15校内测试】【队列】【manacher】
dp??不能确定转移状态.考虑用优先队列储存最优决策点,可是发现当前选择最优不能保证最后最优,在后面可以将之前用过的替换过来. 比如数据: 3 5 4 6 只储存a[i]来决策不能延展到后面的状态,因 ...
- mybatis源码分析(2)-----SqlSession创建
1. 在创建好sqlSessionFactory之后,接着就要配置sqlSession的创建. <bean id="simpleTempalte" class="o ...
- sql中字符分割,日期判断,以及函数的应用
前两天公司有一个功能需求,客户给出几天的工作时间和休息,然后顾客的访问时间必须要在工作时间之内和休息时间之外,所以要求做一下判断.本来以为这个没什么,谁知道客户提供的工作时间段和休息时间段不定,给出的 ...
- 自定义的tabBarController的几种方法
本文转载自:http://blog.sina.com.cn/s/blog_79c5bdc30100t88i.html 我自己实现的一种可以很方便的实现更换TabBarController图片的方法,代 ...
- 在雇员表中查找第二高的工资SQL语句助记
"在雇员表中查找第二高的工资的员工记录"SQL语句怎么写 这个查询首先查找最高工资,然后将它从列表中排除.再查找最高工资. 非常明显,第二次返回的是 ...
- Cocos2d-x3.0 解压zip
2dx3.0为我们集成了unzip库,帮助我们实现对文件的解压,但使用起来略显复杂我这里封装了一个解压工具库.分享一下. 工具类下载:http://download.csdn.net/detail/q ...
- Android Studio Beat版公布!
Android Studio Beat版公布了! 速度比0.61快爆了,有木有! L也能更新了,炫爆了,有木有!
- android基础知识普及
1.密度问题及相互转换 测试机 philips w732 480X800 density 1.5 scaledDensity 1.6500001 通过 context.getResources().g ...