1.浮动布局（float）
介绍：
浮动布局通过将元素移动到容器的左侧或则右侧，从而实现布局，但会使其脱离正常的文档流
应用场景：
小编主要在做文本环绕图片时使用这种布局方式
实例代码
.container {
width: 500px;
height: 500px;
border: 1px solid #000；
}
.container img {
width: 200px;
height: 200px;
float: right;
}
<body>
<div class="container">
<img src="./two.jpg" alt="">
<p>曹七巧的悲剧命运，首先体现在她所嫁的丈夫身上。一个身患重病、毫无感情基础的婚姻，使她在姜家备受歧视和侮辱。这种生活状态，无疑是对她人性的巨大摧残。然而，更可悲的是，她对爱情的渴望和追求也未能如愿。她偷偷地爱上了小叔子季泽，但季泽却严守叔嫂之防，使她性格更加暴躁，情感更加压抑。</p>
</div>
</body>
定位布局
介绍：
定位布局通过设置元素的位置属性，使其相对于其父元素或文档窗口的某个位置进行定位
属性值：
1.Absolute：绝对定位，是相对于最近的且不是static定位的父元素来定位,会使得元素脱离文档流
2.Fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动,元素会被移出正常文档流。
3.Relative：相对定位，是相对于其原本的位置来定位的。不会使元素脱离文档流
4.Static：默认值，没有定位。
5.sticky：元素根据正常文档流进行定位，然后相对它的最近滚动祖先，最近块级祖先，包括 table-related 元素，通过top left right bottom 进行偏移
应用场景
创建层叠效果，顶部固定的导航栏
实例代码
.container {
margin-top: 30px;
width: 100%;
height: 200px;
overflow: scroll;
position: relative;
}
.container img {
width: 200px;
height: 200px;
float: right;
}
.main{
margin-top: 30px;
}
.top{
width: 100%;
position: fixed;
display: flex;
justify-content: space-around;
align-items: center;
margin-bottom: 10px;
height: 30px;
align-items: flex-start;
z-index: 3;
background-color: rgba(0, 0, 0, 0.3);
color: white;
}
小结：
这个实例用到了上面的float布局，position布局，以及下面要讲flex布局，通过属性 fixed的使用对导航栏进行定位，使其固定在顶部，通过设置属性z-index 使顶部导航栏叠在main 上面，如果不设置这个属性顶部导航会被压到下面，
弹性盒子布局
介绍
弹性盒子布局是一种一维布局模型，使用它很容易就能创建灵活的、自适应的布局，他允许容器内得子元素在必要时增大或缩小，已适应不同的可用空间。小编大部分的布局都使用flex进行布局，通过对其主轴和侧轴的切换设置，能够完成大部分网页的需求。
应用场景
弹性盒子布局适用于各种情况，卡片，导航栏，圣杯模型，双飞翼模型等等，
实例
上面的定位布局中，顶部导航栏就用到了flex布局，可以看出使用非常简单，效果也不错
以下是一个圣杯模型实例
.container{
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
}
.header{
width: 100%;
flex: 1;
background-color: black;
color: white;
}
.main{
flex: 8;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
}
.left-nav{
flex: 1;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.right-nav{
flex: 1;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.content{
flex: 8;
height: 100%;
background-color: sandybrown;
}
.footer{
flex: 1;
}
小结
属性flex可以同时设置三个值，每个值分为 flex-grow flex-shrink flex-basis 课程的解释分别是有剩余空间时的伸展能力 ， 容器空间不足时收缩的能力以及没有伸展或收缩时的基础长度（主轴放向），小编一般只写一个值，把他当成主轴方向比例了
布局方式有很多，可以根据布局的需求选择布局方式
