CSS文档流——position，float属性详解
目录
一、文档流是什么
二、脱离文档流
1、设置浮动（float）
float的几个属性介绍：
2、设置定位（position）
position属性：
写在最后
一、文档流是什么
由于之前思否社区写的文章，我的主页：夨落旳尐孩 的文章 - SegmentFault 思否
所以这篇文章就直接从CSS文档流开始讲了，如果文章里面有不懂的内容，可以去看我的思否主页，里面有HTML和CSS基础的相关知识，欢迎大家前去访问。
文档流就是页面的布局中各个元素的先后顺序，正常的文档流就是将页面的每一行布满：块元素独占一行、行内元素从左至右排满一行。比如：div、hr、p等都是块元素，它们会把一行都直接占满，即使没有到达一行，img、span等就是行内元素，一般情况就会从左至右排列。
二、脱离文档流
文档流的一般情况可能不满足我们的设计需求，可以使用不同的布局方式来改变顺序，当前主要的布局方式有：浮动布局(Float)、定位布局(Position)、弹性布局(Flex)、网格布局(Grid)等来改变正常的文档流。
1、设置浮动（float）
float的几个属性介绍：
left 表明元素必须浮动在其所在的块容器左侧的关键字。
right 表明元素必须浮动在其所在的块容器右侧的关键字。
none 表明元素不进行浮动的关键字。
inline-start 关键字，表明元素必须浮动在其所在块容器的开始一侧，在 ltr 脚本中是左侧，在 rtl 脚本中是右侧。
inline-end 关键字，表明元素必须浮动在其所在块容器的结束一侧，在 ltr 脚本中是右侧，在 rtl 脚本中是左侧。
示例：
html：
position 定位
son1
son2
son3
css：（与html元素在同一级文件夹下面）
div{
width:200px;
height:200px;
border: 2px solid black;
float:left;
}
div #son1{
width:40px;
height:40px;
background:burlywood;
float: right;
}
div #son2{
width:40px;
height: 40px;
background: red;
/* position:relative; */
/* float:left; */
top: 44px;
left: 20px;
}
div #son3{
width: 40px;;
height:40px;
/* position: fixed; */
background:yellow;
}
显示效果：
发现在father中的块son1在其父级空间width:200px; height:200px;内是靠右边布局的，而son2，son3在其父级空间width:200px; height:200px;内是靠左边布局的，可以理解成将三个儿子块变为了行内元素。
注意：我这里只设置了父亲的float属性，son1是自己设置的float属性，所以是靠右边布局，son2，son3儿子都是继承于父亲的，所以他们都是靠左，父亲设置的是相对于整个浏览器窗口的。
float的清除方式clear，clear也有几个常见属性：
| left | 在左侧不允许浮动元素 |
| right | 在右侧不允许浮动元素 |
| both | 在左右两侧均不允许浮动元素 |
| inherit | 规定应该从父元素中继承 clear 属性值 |
| none | 默认值。允许浮动元素出现在两侧 |
没有清除的示例：
html:
position 定位
son1
son2
son3
阿Ｑ要画圆圈了，那手捏着笔却只是抖。于是那人替他将纸铺在地上，阿Ｑ伏下去，使尽了平生的力气画圆圈。
他生怕被人笑话，立志要画得圆，但这可恶的笔不但很沉重，并且不听话，刚刚一抖一抖的几乎要合缝，
却又向外一耸，画成瓜子模样了。
阿Ｑ正羞愧自己画得不圆，那人却不计较，早已掣了纸笔去，许多人又将他第二次抓进栅栏门。
CSS:
div{
width:750px;
height:200px;
border: 2px solid black;
float:left;
}
div #son1{
width:40px;
height:40px;
background:burlywood;
float: right;
}
div #son2{
width:40px;
height: 40px;
background: red;
/* position:relative; */
/* float:left; */
top: 44px;
left: 20px;
}
div #son3{
width: 40px;;
height:40px;
/* position: fixed; */
background:yellow;
}
显示效果：
清除的示例：
在CSS文件中加入以下代码：（清除左侧的浮动，由于右侧的浮动与左侧的高度一致，所以右侧的浮动也一起消失了）
div p{
clear:left;
}
效果：
我将son1的高度改为60px，会发现left的只消除了左侧的浮动：
效果：
注：float设置的初衷只是为了实现文字环绕图片，而不是用来布局的。
2、设置定位（position）
position属性：
1、static：默认值，相当于是正常的文档流，但是会忽略top、bottom、left、right，意思就是将前面元素的这些属性忽略，但是保留了width，height）
示例：
change-to-flex
A
B
C
D
实现效果：
说明： B、C两块忽略了前面设置的top和left。
2、relative：生成相对自己原来的位置定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。
示例：
html：
position 定位
son1
son2
son3
CSS：
div{
width:200px;
height:200px;
border: 2px solid black;
}
div #son1{
width:40px;
height:60px;
background:burlywood;
position:relative;
top:10px;
left:20px;
}
div #son2{
width:40px;
height: 40px;
background: red;
top:20px;
}
div #son3{
width: 40px;;
height:40px;
background:yellow;
}效果：
3、absolute：与relative属性不同的是，它是相对于父亲设置的位置偏移，然后使用它还有要注意的地方：1、设定TRBL，2、父级设定Position属性，这样可以保证在使用absolute定位的时候不会因为分辨率的问题发生错位。
示例：
html：
position 定位
son1
son2
son3
CSS：
div{
width:200px;
height:200px;
border: 2px solid black;
position: relative;
}
div #son1{
width:50px;
height:60px;
background:burlywood;
position:absolute;
top:30px;
left:20px;
}
div #son2{
width:40px;
height: 40px;
background: red;
}
div #son3{
width: 40px;;
height:40px;
background:yellow;
}效果：
4、fixed： 设置绝对定位，翻译：固定的，可以根据这个翻译来记忆，它是相对于浏览器窗口来定位的。
5、sticky：黏贴定位，relative和fixed的完美结合（这个地方我不能理解是为什么，因为我设置的时候的效果是和relative的一样的效果，希望有人可以帮我在评论区贴出答案）
写在最后
以上就是我看完参考文献的记录，为自己以后复习有个参照物。有错误的话欢迎在评论区指出。
参考文献：
深入理解css之float - SegmentFault 思否
CSS 布局 position 详解_姜皓的博客-CSDN博客