8.1 流式布局概述
上一章提到多项内容同时对应流式布局：从display属性角度看，display-inside: flow或flow-root对应流式布局；从术语角度看，块容器block container对应流式布局；从FC角度看，BFC对应流式布局；流式布局是从显示特点的角度描述。它们是一个统一体，简言之，flow与flow-root指流式布局，BFC指流式布局，块容器指流式布局。流式布局简称流。
8.1.1 流式布局原理
流式布局的定义：多个盒子在一个页面进行排列时，默认从左往右从上往下的自动排列它们的位置。“流”的字面意思：水在一条管道里流动，这根管道从左至右，到达最右然后转向第二行的最左，不断往后流动。
流式布局的原理：流式布局允许开发人员不用设置盒子坐标，交由浏览器自动计算。自动计算结果示例如下。
一个盒子的坐标通过前面盒子的位置与大小自动计算。第1个盒子的宽度40px，则第2个盒子的x坐标是40px；第一行的高度30px，则第2行y坐标是30px。
类似在白纸上写字，这个字有一个位置坐标，通常写法是“顺着写”。从左往右写，一行写不下换行，或者手动换行写。这也是流的一种体现，写字时不需要思考它的坐标位置。
8.1.2 盒子的坐标基准与坐标值
运行效果
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小步教程</title>
<style>
#div2 , span {
line-height: 30px;
border: 1px solid #eee;
padding: 0 40px;
}
#div2{
height: 40px;
}
</style>
</head>
<body>
<div id="div1">
<span id="span1">元素1</span>
<span id="span2">元素2</span>
<span id="span3">元素3</span>
<span id="span4">元素4</span>
<span id="span5">元素5</span>
</div>
<div id="div2">块级元素6 小步教程 xiaobuteach.com</div>
<div id="div3">
<span id="span7">元素7</span>
<span id="span8">元素8</span>
</div>
</body>
</html>
平面几何坐标系，坐标是相对于原点。CSS布局同理，盒子的坐标相对于坐标基准元素。开发者工具通过“属性”面板查看元素的坐标基准元素、坐标值、以及宽高。
offsetParent表示坐标基准元素，span1以body位置作为坐标原点；offsetTop表示y坐标；offsetLeft表示x坐标；offsetWidth表示宽度，offset区域的宽度包含内容区、padding区与border区，高度同理；有效margin计入offsetTop与offsetLeft。offset系列属性只读。上述各值由浏览器自动计算，对应浏览器工作原理的第5步layout布局。查看body后代元素的offsetParent均为body。
