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. [YC703]ゴミ拾い Easy

    [YC703]ゴミ拾い Easy 题目大意: 二维平面内有\(n(n\le3\times10^5)\)个人和\(n\)个物品,第\(i\)个人在\((a_i,0)\)上,第\(i\)个物品在\((x_ ...

  2. ajax请求数据填充表格———使用art-template模板提高效率

    一.为什么要用art-template模板 在实习的一次项目中,因为需求中展示表格的字段有很多个,后端返回的也是json数据,这时候如果还是使用之前的字符串拼接,这样会开发得比较慢,而且容易出错,而且 ...

  3. [转]STRUTS2中的OGNL

    OGNL表达式是(Object-Graph Navigation Language)是对象图形化导航语言.OGNL是一个开源的项目,struts2中默认使用OGNL表达式语言来显示数据.与serlve ...

  4. 微信小程序缓存滑动距离，当页面浏览到一定位置，滑动其他页面后返回该页面记录之前的滑动距离

    15.微信小程序缓存滑动距离 我们在浏览页面的时候,然后左滑或者右滑到新的页面,等返回此页面,我们希望可以记录上次滑动的距离 虽然这个实现起来并不难,但是会遇到一些坑,因为scroll-view的组件 ...

  5. 安装VS组件提示“所选驱动不再有效。继续安装之前，请先检查安装路径的设置。”要怎么办？

    电脑里面原来装了VS2010,包括的组件有VB和C++,现在想添加C#,结果安装的时候就提示“所选驱动不再有效.继续安装之前,请先检查安装路径的设置”,安装路径在C盘,还有40个G,不知道该怎么办? ...

  6. java string（2）

    1. indexOf()函数是一个执行速度非常快的函数,可以用其与subString()实现高效的字符串分割,比内置的要高效. 2. charAt()方法也是高效率的函数,可以用其实现高效的start ...

  7. jq幻灯片2013-8-31

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. eclipse安装Run-Jetty-Run插件，修改实时生效

    http://marketplace.eclipse.org/content/run-jetty-run   1.直接拖拽到eclipse安装(7/8/9版本都安装) 2.以调试的方式启动jetty( ...

  9. ASP.NET MVC：看 MVC 源码，学习：如何将 Area 中的 Controller 放到独立的程序集？

    背景 本文假设您已经熟悉了 ASP.NET MVC 的常规开发方式.执行模型和关键扩展点,这里主要说一下如何使用 ASP.NET MVC 的源代码解决一些问题. 如何将 Area 中的 Control ...

  10. 使用OllyDbg破解软件

    好,废话不多说,教程开始.  我们首先查壳,是Aspark的壳,对于这个壳,大家应该很熟了.<ignore_js_op>   我已经脱好了壳,再查一下壳,是Dephi的<ignore ...