传统网页布局的三种方式：浮动、定位、标准流（普通流/文档流）。
所谓的标准流，就是标签按照规定好的默认方式排列。例如：
块级元素会独占一行，从上往下顺序排列
常用块级元素：div，hr，p，h1-h6，ul，ol，form，table
行内元素会按照顺序从左到右顺序排列，碰到父元素边缘则自动换行。
常用行内元素：span，a，i，em
注意：实际开发中，一个页面基本都包含这三种布局方式（移动端会有新的布局方式）
为什么需要浮动
提问：如何实现一行多个块级元素（如多个div）并列？
如何实现页面左右两个块级元素的对齐？
总结：有很多布局效果标准流无法完成，但是浮动可以解决，因为浮动可以改变标签默认的排列方式。其中浮动最典型的应用就是让多个块级元素一行内并排。
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
什么是浮动
float属性用于创建浮动框，将其移动到一边，知道左边缘或右边缘触及包含块或者另一个浮动框的边缘。
.left {
width: 200px;
height: 200px;
background-color: aquamarine;
float: left;
}
.right {
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
<div class="left">
左边
</div>
<div class="right">
右边
</div>浮动的特性
脱离标准流的控制（脱标），浮动的盒子不再保留原先的位置，所以它的位置会被占用，下面的代码将第一个盒子设置为浮动，而第二个盒子没有设置浮动，所以第二个盒子会网上走占据第一个盒子的位置，导致两者重叠了。
如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。
<!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">
<title>Document</title>
<style>
.left {
width: 200px;
height: 200px;
background-color: aquamarine;
float: left;
}
.right {
width: 200px;
height: 200px;
background-color: pink;
float: left }
.middle {
width: 200px;
height: 200px;
background-color: blueviolet;
float: left;
}
</style></head>
<body>
<div class="left">
左边 </div>
<div class="middle">
中间 </div>
<div class="right">
右边 </div></body>
</html>注意：浮动的元素是紧贴在一起的，不会有缝隙。如果父级宽度装不下这些浮动的盒子，多出的盒子则会另起一行。
浮动元素会具有行内块元素特性
例如span作为行内元素原本没有宽高（需要转换为行内块元素），但是若给他添加浮动，则不需要转换成行内块元素。
<style>
span,
div {
float: left;
width: 200px;
height: 100px;
background-color: pink;
}
p {
height: 15 0px;
background-color: aqua;
float: right;
}
</style>
<span>1</span>
<div>2</div>
<p>pppb</p>注意：如果块级盒子没有设置宽度，则默认宽度和父级一样宽。但是添加浮动后，它的大小根据内容来决定。
5 浮动元素经常和标准流父级搭配使用
为了约束浮动元素位置，我们一般先用标准流的父级排列上下位置，之后内部子元素采取浮动排列左右位置，这也符合网页布局第一准则。