CSS传统布局-浮动float

前言

css传统的布局方式分为三种，注意这里说的是传统布局，不包括flex布局和grid布局等。

• 1.普通流
  普通流也称标准流，既标签按照规定好的默认方式排列，是最基本的布局方式
  这些标签也是我们学习前端过程中比较基础的标签，分为两类
  1.块级元素，特点：独占一行，从上向下顺序排列，常用的标签为div、hr、a、p、h1~h6、table、form等
  2.行内标签，特点：相邻行内元素在一行上，一行可以显示多个，从左到右排列，碰到父元素边缘则自动换行
• 2.浮动 --我们今天要分享的
• 3.定位 --后面会再分享

为什么需要浮动

学习一个新的知识，我们要先了解学习它的用处，为什么要学它，这里我们思考两个问题
1.如何让多个块级盒子（div）水平排列成一行？

有人想我们可以通过给三个div设置 display:inline-block; 把div转换为行内元素，这样三个div就会在同一行展示，当然可以，那样实现效果如下，div直接会有间隙

2.如何让两个盒子左右靠齐？