流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）。
网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用），例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。
1、布局特点：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。【这就导致如果屏幕太大或者太小都会导致元素无法正常显示】
2、设计方法：使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。
这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。
开发思路： 自适应意味着百分比（0% - 100%) -> 思考：如何确定是不是自适应？
1. 多列等分 -> 百分比等分
2. 左侧固定宽度 + 右侧自适应宽度 思路一 -> 左侧左浮动+右侧利用BFC特性在右侧 思路二 -> 父级给padding-left，预留出来左侧区域的宽度，左侧用绝对定位上去，右侧用百分百宽度
3. 左侧自适应 + 右侧固定宽度 思路一 -> 左侧用百分百宽度,右侧用绝对定位上去
4. 左右固定宽度 + 中间自适应 思路一 -> 左侧左浮动 + 中间百分之百（中间部分再分为左侧百分之百+右侧右浮动） 思路二 -> 左侧左浮动 + 中间百分之百 + 右侧右浮动 （负margin法减掉左右侧） 思路三 -> 左右绝对定位 + 中间百分之百（父元素padding-left,padding-right预留左右侧的位置）
5. 左中右全自适应 -> 全部用百分比
6. font-size、padding,margin,height直接量像素
7. 小的地方可以用display:inline-block;让几个容器放在一排
8. 小图标之类的，可以考虑用::before,::after来实现