1、标准文档流
标准文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。
2、浮动
简介： css中让一个元素脱离标准文档流：
浮动（float）
绝对定位/固定定位:position:absolute/fixed
块级元素：
1、独占一行
2、可以设置宽、高
3、如果不设置宽度，宽度默认为容器的100%
行内元素：
1、与其他元素同行显示
2、不可以设置宽、高
3、宽高就是文字或图片的宽高
2.1浮动的基础知识
2.11 会使元素向左或者向右移动，只能左右，不能上下。
2.12 浮动元素碰到包含框或另一个浮动框，浮动停止。
2.13 浮动元素之后的元素将围绕它，之前的不受影响。
2.14 浮动元素会脱离标准流。
2.15 浮动的基本语法：
2.16 float: left 靠左浮动
2.17 float: right 靠右浮动
2.18 float: none 不使用浮动
2.2文字环绕的基本原理：
当我们给图片设置向左浮动以后，图片脱离文档流，这时文字应该往上移从而被图片遮挡住部分的文字，但是文字有特殊的解析机制，它会在一个不被盖住的地方显示，所以出现了文字环图片的效果
3.浮动后产生的问题
1、父元素的高度无法被撑开，影响与父元素统计同级的元素（高度塌陷）
2.如果浮动元素后面跟着非浮动的元素，非浮动的元素会紧随其后浮动起来（下面的元素会跑到上面的元素（独占一行特性消失）位置中）
3.如果浮动元素前面还有同级元素没有浮动，那么这个元素之前的元素也需要浮动，否则会影响页面的结构
3.1 高度塌陷：
3.11： 原理：
一个块级元素如果没有设置height，其height是由子元素撑开的。对子元素使用了浮动之后，子元素会脱离标准文档流，也就是说，父级元素中没有内容可以撑开其高度，这样父级元素的height就会被忽略，这就是所谓的高度塌陷
点击查看代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
margin: 0 auto;
width: 1226px;
height: 614px;
}
.left{
float: left;
width: 234px;
height: 614px;
background-color: #EBAAB4;
}
.right{
float: right;
width: 978px;
height: 614px;
background-color: #EBAAB4;
}
.right ul li{
list-style: none;
}
.right ul {
float: left;
}
.right ul li{
float: left;
width: 234px;
height: 300px;
background-color: darkmagenta;
margin-right: 14px;
}
.right ul li{
margin-bottom: 14px;
}
/* 4n 第四个 和 第八个 */
.right ul li:nth-child(4n){
margin-right: 0px;
}
</style>
</head>
<body>
<!--
大盒子
宽度 1226px 高度 614px 水平居中
左盒子
宽度 234px 高度 614px
右大盒子
宽度 978px 高度 614px
右侧小li
宽度 234px 高度 300px 右外边距14px
前四个li
添加下外边距 14px
-->
<div class="box">
<div class="left">
</div>
<div class="right">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
</div>
</body>
</html>
4.浮动如何清除？清除浮动流程
4.1清除浮动的常用方法
4.11直接给父元素设置高度：（只适合高度固定的布局）
浮动在提供强大威力的同时，也带来了很多问题。一个著名的问题就是，当一个父节点包括了若干浮动的子元素时，父节点的排版会考虑到浮动子元素的大小和位置，但是子元素并不会影响父节点的大小。在这种情况下，父节点的height变成了0，并且忽略其他属性。 很多时候，这个问题没有被注意到，特别是当父节点没有附合任何的CSS样式，而且嵌套的元素也看上去被正确地排列了。
4.12 额外标签法：
在最后一个浮动元素后面添加属性为clear:both;的元素
` <div style="clear:both;"></div>`
优点：简单，代码少，浏览器兼容性好。
缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。
4.13 单伪元素清除法：
给父元素后面最后的一个盒子添加clear:both;属性的:after伪元素：
.clearfix:after
{
/* 前面三行默认 */
content: "";
/* 默认转换行内 手动设置转换块级 */
display: block;
clear: both;
/* 隐藏元素 */
height: 0;
visibility: hidden;
}
.clearfix
{
display: inline-block;
}
4.14 双伪元素清除法（重点）：
只需要给浮动的父元素添加clearfix这个类名即可让父元素自动检测高度
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 1226px;
/* 因为内容可能不确定，不方便给高度 */
margin: 0 auto;
}
.left {
float: left;
width: 234px;
height: 400px;
background-color: orange;
}
.right {
float: left;
width: 992px;
height: 400px;
background-color: #6cf;
}
footer {
height: 100px;
width: 1226px;
margin: 0 auto;
background-color: #55ffff;
color: #fff;
/* 清楚浮动 */
}
/* 双伪元素清除浮动 */
.clearfix::before,
.clearfix::after {
content: '';
display: block;
}
.clearfix::after {
clear: both;
}
</style>
</head>
<body>
<!-- 只需要给浮动的父元素添加clearfix这个类名即可让父元素自动检测高度 -->
<div class="box clearfix">
<div class="left">左盒子</div>
<div class="right">右盒子</div>
<!-- 如果是无序列表结构，在此处放div不符合规范，我们可以用伪元素来帮我们创建一个盒子托起整个结构 -->
</div>
<footer>
我是底部
</footer>
</body>
</html>
4.15 父元素设置overflow属性：
**浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果
**
给父元素设置overflow属性
.clearfix{
overflow: auto;
/*overflow: hidden;也可以*/
}
5、Position属性定位：
简介：
position属性是用于指定一个元素的定位方法类型的属性，它的取值有：static（默认类型）、relative、absolute、fixed。当position属性的值不为static（即不为默认）时，我们可以添加：top、bottom、left和right属性对当前元素进行具体的定位，并且可以使用z-index来设置层级的上下关系。
5.1 Position static（默认值）
简介：
默认值，没有定位，元素出现在正常的文档流中，会忽略 top, bottom, left, right 或者 z-index 声明，块级元素从上往下纵向排布，⾏级元素从左向右排列
下列的例子中，所有的盒子都将一个接一个的堆起来。因为它们都是块级元素，并且没有被浮动
点击查看代码
<div class="box-set">
<div class="box box-1">Box 1</div>
<div class="box box-2">Box 2</div>
<div class="box box-3">Box 3</div>
<div class="box box-4">Box 4</div>
</div>
<style>
.box-set {
background: #e8eae9;
}
.box {
background: #8ec63f;
height: 80px;
width: 80px;
}
</style>
5.2 Position relative（相对对位）
简介
生成相对定位的元素，相对于其原来的位置进行定位。元素的位置通过left、top、right、bottom属性进行规定。
元素的定位永远是相对于元素自身位置的，和其他元素没关系，也不会影响其他元素。
点击查看代码
<style>
.box-set {
background: #e8eae9;
}
.box {
background: #8ec63f;
height: 80px;
position: relative;
width: 80px;
}
.box-1 {
top: 20px;
}
.box-2 {
left: 40px;
}
.box-3 {
bottom: -10px;
right: 20px;
}
</style>
<div class="box-set">
<div class="box box-1">Box 1</div>
<div class="box box-2">Box 2</div>
<div class="box box-3">Box 3</div>
<div class="box box-4">Box 4</div>
</div>
5.3 Position absolute（绝对定位）
简介：
对绝对定位的元素使用偏移量属性，这个元素将以相对定位的父节点作为参考系进行偏移。
如果没有对绝对定位的元素使用偏移量属性，那么该元素将被放置在父节点的左上角。如果只设置了top属性，那么该元素则只做垂直方向的偏移，而水平方向依然靠着父节点的最左边。
点击查看代码
<style>
.box-set {
background: #e8eae9;
height: 200px;
position: relative;
}
.box {
background: #8ec63f;
height: 80px;
position: absolute;
width: 80px;
}
.box-1 {
top: 6%;
left: 2%;
}
.box-2 {
top: 0;
right: -40px;
}
.box-3 {
bottom: -10px;
right: 20px;
}
.box-4 {
bottom: 0;
}
</style>
<div class="box-set">
<div class="box box-1">Box 1</div>
<div class="box box-2">Box 2</div>
<div class="box box-3">Box 3</div>
<div class="box box-4">Box 4</div>
</div>
5.4 Position fixed（固定定位）
简介：
生成固定定位的元素，指定元素相对于屏幕视⼝（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变，⽐如回到顶部的按钮⼀般都是⽤此定位⽅式。
元素的定位是相对于 window （或者 iframe）边界的，和其他元素没有关系。但是它具有破坏性，会导致其他元素位置的变化。
点击查看代码
<!--
一个典型的使用固定定位的例子是网页中的顶部横条或者底部横条。当用户滚动页面时，那个横条始终停留在浏览器视口的顶部或者底部。
-->
<footer>Fixed Footer</footer>
footer {
bottom: 0;
left: 0;
position: fixed;
right: 0;
}
5.5 Position sticky（粘性定位）
简介：
粘性定位，基于用户的滚动位置来定位。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right,
bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
点击查看代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>
<div class="sticky">我是粘性定位!</div>
<div style="padding-bottom:2000px">
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
</div>
</body>
</html>
5.6 z-index 属性
简介：
如果你需要让某个元素放置在其他元素的上面（可在默认的排版中，她并不是在他的上面），这时你可以改变她的z-index属性，让她跑到他的上面。
注意：如果你需要设置一个元素的z-index属性，你必须首先设置这个元素是relative，absolute或者fixed定位。就像对于设置top, bottom, left, right属性一样。
点击查看代码
<style>
.box-set {
background: #e8eae9;
height: 160px;
position: relative;
}
.box {
background: #8ec63f;
border: 3px solid #f7941d;
position: absolute;
}
.box-1 {
left: 10px;
top: 10px;
}
.box-2 {
bottom: 10px;
left: 70px;
z-index: 3;
}
.box-3 {
left: 130px;
top: 10px;
z-index: 2;
}
.box-4 {
bottom: 10px;
left: 190px;
z-index: 1;
}
</style>
<div class="box-set">
<div class="box box-1">Box 1</div>
<div class="box box-2">Box 2</div>
<div class="box box-3">Box 3</div>
<div class="box box-4">Box 4</div>
</div>
