主要内容
01流式布局
流式布局其实是一个概念。浏览器解析代码时，一般是自上而下。网页中的块级元素和行内元素是按照解析顺序依次排列在网页上的，所以这个流布局可以知道什么是行内元素，什么是块级元素。下图显示了这两个元素的特征以及网页中显示的具体状态。
以及标准文档流的特点:存在空白折叠现象，也就是说代码中有很多空单元格，而显示的网页中只有一个空单元格。当块级元素不均匀时，它们都以底边对齐的方式显示。
02浮动布局
即浮动脱离了标准文档流的限制。浮动元素可以并排排列，宽度和高度可以设置。
浮动原则
例如，此标签是一个内嵌元素。当没有添加属性float时，设置宽度和高度是无效的。但是，一旦添加了float:left|right，您就可以设置宽度和高度，而无需将display:block转换为块级元素。
浮动的反义词是清除浮动。你为什么清飘？有几个原因:
清除方法一:主动给父框增加高度。
可以理解为，在设置父元素的高度时，子元素的浮动影响是圈出来的，不会影响其他元素。
清除方法二:父设置清除:both | left | right
clear属性有三个参数，可以清除左浮动和/或右浮动。
清洁方法三:隔墙法
通过添加一个p，并将clear:both属性添加到这个p；并且可以将高度加到这个P上来分隔上下模块。这个方法是上面两个的扩展，就不赘述了。
浮动模式4:溢出:隐藏
如果将overflow:hidden属性添加到一个框中，那么这个框将有一个高度，它可以控制子元素浮动的影响。上面我们也说过，添加浮动时不需要设置display:block。事实上，本质上添加浮动意味着转换为块级元素。这种方法实际上间接增加了父代的高度。
03定位布局
有相对定位，绝对定位，固定定位。每个定位都有自己的特点，又相互关联。
相对定位:
相对定位特性:相对定位不偏离标准，仍然占据原位置，即使根据相对定位属性不在原位置。
相对定位目的:一般不做大的页面布局，只是微调，可以作为绝对定位的参考。
使用相对定位。默认是供参考的浏览器窗口。
绝对定位
绝对定位特性:绝对定位是非标，不会占位置。
绝对定位目的:根据绝对定位的特点，可以进行大范围的微调和封顶效果。绝对定位是指上一级有position属性的元素进行定位。如果上一级没有位置属性，请参考浏览器窗口。
固定定位
固定定位特性:固定定位是不标准的，不会占位置。参考点是浏览器窗口，定位不会随滚动条滚动。
事实上，网页是三维的。只有在定位元素时，才能使用z-index属性。值越大，它越高。但是，当值相等或未设置时，比较相应父元素的大小。
04灵活布局
灵活布局的内容其实非常多。这篇文章字数有限，我就稍微解释一下，我会在新的一篇里详细解释。
网页布局是CSS的关键部分，而flex布局也就是灵活布局是重中之重。以上三种布局都是传统布局，但是对于一些特殊的布局非常不方便，而且精度不够精确。
什么是灵活布局？
灵活布局是为盒子模型提供最灵活的布局。可以使用任何元素，例如内嵌元素或块级元素。可以使用任何元素。使用盒子模型的前提是父子关系。
上面说过使用条件必须是父子关系才可以使用，所以使用前在父中添加上面的代码，下面是布局示意图。
母级分为主轴和横轴，即X轴和Y轴；每个轴分为起始位置和结束位置。父项中的子元素称为单项，单项在主轴和横轴之间占据一定的空。看懂上面的示意图，灵活布局就可以开始了。
我们根据一个布局的例子来解释它:
上图有13个项目，正方形的高度是100。在父对象中，使用display:flex设置灵活布局。当设置了flex-wrap:wrap时，当父行中的空之间容纳不下子元素的数量时，剩余的子元素将被强制换行。
Justify-content:是水平布局设置，align-items是垂直子元素的布局设置。当我们打开浏览器的开发者设置时，点击相应的代码就会显示出相应的布局，很好理解。
以上是我总结的所有网页的基本布局方法。其实bootstrap是一个专门用于响应式布局的js模块，但是不依赖于模块的布局方法只有四种。所以，以后学习Bootstrap之类的js扩展模块的基本方法就很简单了。如果你喜欢这篇文章，记得关注我，防止你错过接下来的精彩内容。如有疑问，请用我的同名微信官方账号留言或在评论区留言。
