float、flex布局

前端的五种基本布局分别是：table布局、float布局、absolute布局、flexbox布局、grid布局（往后的比较新）。

float布局的认识

技术比较老了，不建议使用，了解下
我们知道在一个新建的html文件上添加的内容大概可以分为两种，它们在普通文档流（就是没有设置其他布局时，页面所默认的文档流）上的表现不同。

一种是块级元素，< div >、< p >、 < form >等等，
1.每个块元素都会都会独占一整行空间，在页面上默认从上向下排列。
2.对块的高度、宽度、margin和padding设置有效，宽度没有设置时，默认为100%。
3.块级元素中可以包含块级元素和行内元素。

一种是行内元素，< intput >、< a > 、< label>等等，
1.行内元素不会独占一整行空间，可以多个行内元素在一条水平线上排列。
2.高度和宽度设置是无效的，由内容决定。
这样的话实现文字环绕图片很是困难，float属性恰好能很简单的解决这样的问题。

float属性可以使元素脱离文档流，在一行上并行排列。但是并不是像absolute布局那样完全脱离文档流，float布局还会影响文本，可以这样说吧？float元素脱离了文档流，但是不脱离文本流。例：

<div style