前端布局对前端开发而言是必不可少的环节之一。我所理解的前端布局可以分成两个大类，第一类是元素层面的布局，就是像absolute布局、flex布局等等，都是描述元素在页面上以何种形式呈现，即局部的布局；第二类是网页层面的布局，像静态布局、响应式布局等，都是描述同一个网页在不同的设备上的呈现形式，即整体的布局。接下来就详细整理一下这两大类布局。

首先是第一类，总体上可以大致分为文档布局、浮动布局、定位布局三种，他们注重的是如何实现某些元素在页面上的呈现形式。

一、文档布局：首先我们要知道，默认的网页形式是文档流的形式，一个网页就像是一条条从左流向右的河流。在文档中有两种元素，内联元素（display:inline）和块级元素（display:block）。内联元素默认从左到右流，遇到阻碍或者宽度不够自动换行，继续按照从左到右的方式布局。而块级元素则会独占一行，按照从上往下的方式布局。内联元素的宽度和高度默认都被内容撑开。

二、浮动布局：浮动布局是我们最常用的布局，其表现形式为float:left;。其特点是，浮动元素会脱离文档流。我们可以很清晰地看到，通过float的方式，使元素脱离了文档流，变为行内块元素（display:inline-block），这个元素对于文档流的子元素而言就像内联元素一样，会占用自己大小的空间，而对于容器元素而言又像是不存在一样，会悬浮在文档流的上方。

这种方式虽然能够较好地实现我们想要的一些效果，但是很容易引起一个问题，那就是父类高度塌陷。在文档流中，父类的高度是会被子类撑开的，而用浮动布局后，如果浮动元素的高度大于子元素的高度，则父元素不会被浮动元素撑开，浮动元素则会继续覆盖在下一个元素上。我们可以通过下面的例子来理解。