做门户网站需要什么东莞网站制作推广公司
什么叫文档流？
简单来说，就是指元素在页面中出现的先后顺序。
一、正常文档流
“正常文档流，将一个页面从上到下分为一行一行，其中块元素独占一行，相邻行内元素在每一行中按照从左到右排列直到该行排满。”也就是说，正常文档流指的就是默认情况下页面元素的布局情况。
二、脱离文档流
脱离文档流，指的是脱离正常文档流。正常文档流就是我们没有使用浮动或者定位去改变的默认情况下的HTML文档结构。换一句话说，如果我们想要改变正常文档流，可以使用有两种方法：浮动和定位。
-------来自绿叶学习网
浮动
1.通过浮动设置水平布局
浮动是CSS布局的最佳利器，我们可以通过浮动来灵活地定位页面元素，以达到布局网页的目的。
我们都知道，块元素的水平布局要满足等式，（不太清楚的可以看这篇了解一下水平方向布局）
而浮动可以让水平布局不再强制满足等式成立了!!即我们可以通过浮动来设置水平布局
网页看做一条小溪 文档流可以理解为水里，浮动可以理解为水面，两者各自占领独自的区域来布局
让我们看例子吧：
因此我们可以得出：
元素设置浮动以后，它会完全从文档流中脱离，不再占用文档流的位置
当我们将box1也设置为浮动会怎么样呢？
分析：因为box1和box2都变成浮动元素了，可以想象成他们都浮在了水面上，这样的话，而且box2是紧挨着box1的，不会覆盖box1，可以想象成他们都浮在水面上，但是占据不同的位置，就像在水下时，他们会挨着排列一样
如果加入box3呢？
我们看不见box3！！因为box3没有脱离文档流，这就意味这什么呢？意味着box3还在水底呢！那它就要符合文档流的布置
看到了嘛！box3在box1和box2的下面呢，而且在文档流中独占一行
让我们总结一下浮动的特点吧：
- 浮动元素会完全脱离文档流，不再占据文档流中的内容
- 设置浮动以后元素会向父元素的左侧或右侧移动
- 浮动元素默认不会从父元素中移出
- 浮动元素向左侧或向右移动时，不会超过它前面的其他浮动元素
- 如果浮动元素的上边是一个没有浮动的元素，则浮动元素无法上移
- 浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高
2. 浮动实现文字环绕
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./reset.css"><title>Document</title><style>.box1{width: 100px;height: 100px;background-color: salmon;float: left;}</style>
</head>
<body><div class="box1"></div><div>燕子去了，有再来的时候;杨柳枯了，有再青的时候;桃花谢了，有再开的时候。但是，聪明的，你告诉我，我们的日子为什么一去不复返呢?--是有人偷了他们罢:那是谁?又藏在何处呢?是他们自己逃走了罢:现在又到了哪里呢?我不知道他们给了我多少日子;但我的手确乎是渐渐空虚了。在默默里算着，八千多日子已经从我手中溜去;像针尖上一滴水滴在大海里，我的日子滴在时间的流里，没有声音，也没有影子。我不禁头涔涔而泪潸潸了。去的尽管去了，来的尽管来着;去来的中间，又怎样地匆匆呢?早上我起来的时候，小屋里射进两三方斜斜的太阳。太阳他有脚啊，轻轻悄悄地挪移了;我也茫茫然跟着旋转。于是--洗手的时候，日子从水盆里过去;吃饭的时候，日子从饭碗里过去;默默时，便从凝然的双眼前过去。我觉察他去的匆匆了，伸出手遮挽时，他又从遮挽着的手边过去，天黑时，我躺在床上，他便伶伶俐俐地从我身上跨过，从我脚边飞去了。等我睁开眼和太阳再见，这算又溜走了一日。我掩着面叹息。但是新来的日子的影儿又开始在叹息里闪过了。在逃去如飞的日子里，在千门万户的世界里的我能做些什么呢?只有徘徊罢了，只有匆匆罢了;在八千多日的匆匆里，除徘徊外，又剩些什么呢?过去的日子如轻烟，被微风吹散了，如薄雾，被初阳蒸融了;我留着些什么痕迹呢?我何曾留着像游丝样的痕迹呢?我赤裸裸来到这世界，转眼间也将赤裸裸的回去罢?但不能平的，为什么偏要白白走这一遭啊?你聪明的，告诉我，我们的日子为什么一去不复返呢?</div>
</body>
</html>效果图
分析：当给box1设置为浮动之后，box1并没有覆盖文字的内容，而是实现了文字环绕box1
3.元素脱离文档流的特点
1.块元素
2.行内元素
发现了吗，为span设置的宽和高没有显示，因为span是行内元素，是无法设置宽高的
哇！！我们可以发现 ，span的宽高设置起作用了！！！
总结脱离文档流元素的特点：（不只是浮动，只要是脱离文档流都有这个特点）
块元素：
- 块元素不再独占页面的一行
- 脱离文档流以后，块元素的宽度和高度默认都被内容区撑开
行内元素：
- 行内元素脱离文档流后会变成块元素，特点和块元素一样
脱离文档流后就不再区分行内和块元素了，即浮在水面之后，大家都平等啦hhh
纸上得来终觉浅，觉知此事要躬行！
如有错误，欢迎指正，同时欢迎大家留言讨论，创作不易，谢谢支持！！！