流式布局，有人也叫百分比布局。通常在制作网页时候不使用固定的宽度，而是使用百分比。

流式布局可以动态的调整以适应于任何宽度，多使用相对长度单位，通常是百分比或是rem。

流式布局不推荐使用固定单位，如px或是英寸。因为屏幕的宽高会随着设备的不同而改变。网站布局需要适应这种变化，而固定单位有太多的限制。幸运的是，Ethan指出用一个简单的公式，就可以在流式布局中使用相对值。

公式是用目标元素的宽度除以他父元素的宽度，结果就是目标元素的相对宽度

target的宽度 / parent的宽度 = result

需求：一个container的div，包裹着section和aside两个元素。section在左aside在右，他们之间是相等的间距。

.container {
  width: 1000px;
  background-color: #CCCCCC;
  height: 100px;
}

section {
  float: left;
  margin: 10px;
  width: 640px;
  height: 50px;
  background-color: gray;
}

aside {
  float: right;
  margin: 10px;
  width: 320px;
  height: 50px;
  background-color: pink;
}


<div class="container">
  <section></section>
  <aside></aside>
</div>

通过上面的公式，把固定宽度换算成相百分比长度。

section {
  float: left;
  margin: 1%;   
  width: 64%;
  height: 50%;
  background-color: gray;
}

aside {
  float: right;
  margin: 10%;
  width: 32%;
  height: 50%;
  background-color: pink;
}

把.container的宽度改成800px

把.container的宽度改成50ox

从上面可以的情况可以看到，不管我们把.container容器的宽度设置为多少个像素，section和float总能按照一定的比例进行分布。

采用流式布局概念和公式，就可以创建一个完全动态的网站了，他可以适应各种尺寸的设备了。

为了更好的控制流式布局，你也可以使用最小宽度(min-width),最大宽度(max-width),最小高度(min-height)和最大高度(max-height)把他们应用到元素容器上。