html基本布局（理解，代码实现教程后续更新）

写前端网站最主要的是布局用得好，现在我先带友友们认识布局，实现教程后续更新

前端布局主要有

Float（浮动布局）：因为该布局缺点大，被认为是辅助布局，新手试用。

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。直到它的外边缘碰到包含框或另一个浮动框的边框为止。

这是所有盒子向左浮动一个挨着一个，如果所有盒子占满浏览器的窗口就会重新换行显示，

所有我们窗口大小会影响网站布局，这个就是其中的缺点。所以很少使用

flex（弹性布局）：现在flex布局是网页的主流布局，大多面试题的圣杯和双飞翼布局实现基本用flex不急（自行百度理解）就是以flex布局写的， 能否畅快的玩转flex布局，重点就是这两个轴了，理解这个万事大吉。主轴和交叉轴在默认情况下，可以看做是一个第四象限的坐标轴，在坐标轴里的x轴就是我们的主轴，y轴就是我们的交叉轴。项目主轴上排列，排满后在交叉轴方向换行。交叉轴垂直于主轴，它的方向取决于主轴方向。

以上是实现效果；

grid（网格布局）：它可以把网页划分为一个个网格，可以任意组合不同的网格，做出各种各样的布局。大致效果和表格的划分区域如下：