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布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别的更多相关文章

  1. CSS中的ul与li样式详解

    CSS中的ul与li样式详解ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style-type属性.list-style-image属性.li ...

  2. 基于JavaSE阶段的IO流详解

    1.IO流基本概述 在Java语言中定义了许多针对不同的传输方式,最基本的就是输入输出流(俗称IO流),IO流是属于java.io包下的内容,在JavaSE阶段主要学下图所示的: 其中从图中可知,所有 ...

  3. SQL 中详解round(),floor(),ceiling()函数的用法和区别？

    SQL 中详解round(),floor(),ceiling()函数的用法和区别? 原创 2013年06月09日 14:00:21   摘自:http://blog.csdn.net/yueliang ...

  4. BRD——>MRD——>PRD，产品经理三大文档概念详解及前后逻辑

    转自:https://blog.csdn.net/neikutaixiao/article/details/40819445 商业需求文档Business Requirement DocumentBR ...

  5. CSS属性：定位属性（图文详解）

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. CSS的定位属性有三种,分别是绝对定位.相对定位.固定定位. posit ...

  6. Spring Cloud Zuul 限流详解（附源码）（转）

    在高并发的应用中,限流往往是一个绕不开的话题.本文详细探讨在Spring Cloud中如何实现限流. 在 Zuul 上实现限流是个不错的选择,只需要编写一个过滤器就可以了,关键在于如何实现限流的算法. ...

  7. Spring Cloud限流详解

    转自:https://blog.csdn.net/tracy38/article/details/78685707 在高并发的应用中,限流往往是一个绕不开的话题.本文详细探讨在Spring Cloud ...

  8. Spring Cloud(十二)：Spring Cloud Zuul 限流详解（附源码）（转）

    前面已经介绍了很多zuul的功能,本篇继续介绍它的另一大功能.在高并发的应用中,限流往往是一个绕不开的话题.本文详细探讨在Spring Cloud中如何实现限流. 在 Zuul 上实现限流是个不错的选 ...

  9. web前端学习（四）JavaScript学习笔记部分（5）-- 事件流详解

    1.JS事件详解-事件流 1.1.事件流 1.事件流: 描述的是在页面中接受事件的顺序 2.事件冒泡: 由最具体的元素接收,然后逐级上传播至最不具体的节点(文档) 3.事件捕获: 最不具体的节点先接收 ...

随机推荐

  1. BZOJ 4516: [Sdoi2016]生成魔咒 后缀自动机 性质

    http://www.lydsy.com/JudgeOnline/problem.php?id=4516 http://blog.csdn.net/doyouseeman/article/detail ...

  2. Java并发（九）：重入锁 ReentrantLock

    先做总结: 1.为什么要用ReentrantLock? (1)ReentrantLock与synchronized具有相同的功能和内存语义: (2)synchronized是重量级锁,性能不好.Ree ...

  3. ZOJ 3256 Tour in the Castle 插头DP 矩阵乘法

    题解 这题是一道非常好的插头题,与一般的按格转移的题目不同,由于m很大,要矩阵乘法,这题需要你做一个按列转移的插头DP. 按列转移多少与按格转移不同,但大体上还是基于连通性进行转移.每一列只有右插头是 ...

  4. Codeforces Round #301 (Div. 2) B. School Marks 构造/贪心

    B. School Marks Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/540/probl ...

  5. python - 在Windows系统中安装Pygame及导入Eclipse

    环境:python3.6(只有一个版本)+ windows10(64 bit)  + Eclipse+pydev python3.6安装完成后,会自带 easy_install 和 pip3,在Win ...

  6. java同步ldap实例

    1.准备过程 1.1  在windows server 2008 R2操作系统下搭建AD域,不懂得看链接地址:http://99532720.blog.51cto.com/2194488/696611 ...

  7. MySQL单表恢复方法

    正休息的时候一个电话将我的睡意完全打散,“开发童鞋写update SQL的时候忘了加where条件了”,相信每一个DBA同学听到这个消息的时候都有骂街的冲动吧.万幸只是单表写花了,而不是哪位大神在DB ...

  8. Percona-Toolkit学习之安装和配置

    http://blog.chinaunix.net/uid-26446098-id-3390779.html

  9. S3C2440上LCD驱动(FrameBuffer)实例开发讲解

    一.开发环境 主  机:VMWare--Fedora 9 开发板:Mini2440--64MB Nand, Kernel:2.6.30.4 编译器:arm-linux-gcc-4.3.2 二.背景知识 ...

  10. Unity3D如何减少安装包大小

    译官方文档:http://docs.unity3d.com/Manual/ReducingFilesize.html PDF文档:http://www.rukawa.cn/Uploads/Attach ...