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.事件捕获: 最不具体的节点先接收 ...
随机推荐
- ssm整合总结(一)--第一步之使用maven搭建一个web项目
本文内容来自:山硅谷,本文内容整合了任务2,任务3,任务4内容.http://www.gulixueyuan.com/my/course/50 1说明 1.1该项目使用的知识点有 1.1.1校验方式是 ...
- Makefile-filter和filter-out
filter:代表中目标串中找出符合匹配规则的. 示例: sources := foo.c bar.c baz.s ugh.h foo: $(sources) cc $(filter %.c %.s, ...
- JDK源码(1.7) -- java.util.AbstractCollection<E>
java.util.AbstractCollection<E> 源码分析(JDK1.7) ------------------------------------------------- ...
- git -- 简单命令
1.git init 当前目录初始化 2.git status 检查当前文件状态 Changes to be committed” 这行下面的,就说明是已暂存状态 Changed b ...
- leetcode132. Palindrome Partitioning II
leetcode132. Palindrome Partitioning II 题意: 给定一个字符串s,分区使分区的每个子字符串都是回文. 返回对于s的回文分割所需的最小削减. 例如,给定s =&q ...
- angular2组件通信
父到子 父组件: ts部分: @Component({ selector: 'app-info', templateUrl: './info.component.html', styleUrls: [ ...
- 海思hi3518 opencv测试
2.4.9的opencv 安装好交叉编译后,用Cmake 配置opencv 修改CMakeCache.txtCMAKE_EXE_LINKER_FLAGS:STRING=-lpthread -lrt - ...
- (转)基于SQL的EAN13、ENA8条形码校验位生成
USE [DB]GO/****** Object: UserDefinedFunction [dbo].[EAN13] Script Date: 07/04/2017 15:21:51 ******/ ...
- [Android Studio] Android Studio中查看类的继承关系
转载自:http://blog.csdn.net/hyr83960944/article/details/38098091 查看类的继承关系的快捷键F4,在Android Studio常用快捷键这篇文 ...
- wamp网站Forbidden You don't have permission to access
Forbidden You don't have permission to access 问题原因:apache的2.4的版本中 Require all denied 应该变成Require a ...