前端开发中布局形式

布局

我们可以把网页理解成是由一个个盒子排列组合而成的，那么盒子之间又是怎么排列布局的呢？

网页常见的布局方式大概有五种：普通文档流布局、浮动布局（Float）、绝对布局（Absolute）、弹性布局（Flex）、网格布局（Grid）。

普通文档流布局

默认的布局方式，由块级元素（display: block）和行内元素（display: inline）等组成，元素之间按照从左到右，从上到下的顺序排列。

浮动布局

相对于普通文档流布局，浮动布局会脱离普通文档流，分为左右浮动，具体来说就是float的值为left和right，一般会在普通文档流布局的上面进行界面的布局，如果想避免浮动布局遮盖普通布局的情况，可以考虑使用清除浮动。

绝对布局

元素使用 position: absolute 属性进行绝对布局，使用绝对布局的元素会脱离文档流，然后根据top,bottom,left,right等属性值进行元素位置的改变，其定位是参考祖先元素中 position 为非 static 值的第一个元素。

弹性布局

也称 Flex 布局，是一个完整的模块，而不是一个单一属性，其中有的属性是设置在父元素上，有些则是设置在子元素上。如果我们说传统的布局是建立在块级元素和行内元素的文本流上，那么 Flex 布局就是建立在 flex-flow 的轴方向上的，而这个轴可以根据开发者的需要进行自主设置。
弹性布局语法-阮
弹性布局实例-阮

网格布局

是用于制定行与列的二维 CSS 布局方法，可以将页面分割成数个主要的区域，或者用来定义组件内部元素间的大小、位置和图层之间的关系。
网格布局参考文档

以上是常用的五种网页布局方法，在实际项目中，我们应该根据场景选择适当的方法。