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.事件捕获: 最不具体的节点先接收 ...
随机推荐
- BZOJ 3676: [Apio2014]回文串 回文树 回文自动机
http://www.lydsy.com/JudgeOnline/problem.php?id=3676 另一种更简单更快常数更小的写法,很神奇……背板子. #include<iostream& ...
- VK Cup 2016 - Qualification Round 1 (Russian-Speaking Only, for VK Cup teams) C. Promocodes with Mistakes 水题
C. Promocodes with Mistakes 题目连接: http://www.codeforces.com/contest/637/problem/C Description During ...
- 机器学习中的 precision、recall、accuracy、F1 Score
1. 四个概念定义:TP.FP.TN.FN 先看四个概念定义: - TP,True Positive - FP,False Positive - TN,True Negative - FN,False ...
- 把json格式的字符串转换成javascript对象或数组
第一种 JSON.parse(jsonString) 第二种 eval("("+jsonString+")") 第三种 var obj=(function ...
- iOS开发系列--通讯录、蓝牙、
iOS开发过程中有时候难免会使用iOS内置的一些应用软件和服务,例如QQ通讯录.微信电话本会使用iOS的通讯录,一些第三方软件会在应用内发送短信等.今天将和大家一起学习如何使用系统应用.使用系统服务: ...
- CXF生成调用webservice的客户端
首先当前是从官网下载cxf组件. http://cxf.apache.org/download.html 下载后解压,在这里主要是用到解压后的bin目录中的wsdl2java.bat该批处理文件. 可 ...
- java如何禁掉反射
SecurityManager 有一个checkMemberAccess这个方法可以阻止利用反射:如: SecurityManager sm = new SecurityManager(); sm.c ...
- Windows蓝屏dump文件查看器(转)
Windbg-分析Windows蓝屏原因利器[转]下载地址先声明下,虽然用windbg诊断蓝屏之前网络上已经有人发过教程了,但就我而言, 学会使用windbg来诊断蓝屏也算是自己的原创吧.以前看一个微 ...
- Use an LM317 as 0 to 3V adjustable regulator
Most engineers know that they can use an inexpensive, three-terminal adjustable regulator, such as F ...
- linux 多线程查看工具
参考: http://www.oschina.net/translate/command-line-tools-to-monitor-linux-performance?cmp&p=1 htt ...