结合三维空间坐标系形象理解CSS中的浮动float与浮动流

---

一、理解浮动流概念

在html文件中，所有布局默认排版于标准文档流中。
但当对某个元素进行浮动时，元素将半脱离文档流，存在于浮动流中。
浮动一般用于：水平布局或者是文字图片环绕。

*之所以说半脱离，是因为元素浮动是相对于元素原本在标准文档流内的位置进行浮动，并且浮动流的宽度依然受到标准文档流内的父级的制约，浮动流元素虽然是水平排布，但是如果父级宽度不够时，浮动元素将会换行继续水平排布。

按照三维空间解析文档流与浮动流的关系：

二、浮动排布规则以及浮动对于标准文档流排布的影响

我们首先需要了解标准文档流的元素两种默认排布方式：水平排布（行内元素和行内块元素）和垂直排布（块级元素），元素会默认排布在文档流末尾。其定位都是按照他的上一个兄弟元素来判定文档流末尾进行插入，我们结合上面的坐标系图理解：

1、在标准文档流中的排布方式和元素类型：

对于块级元素，他会锁定离他最近的兄弟元素的y轴坐标作为文档流末尾进行定位，在垂直y轴方向垂直插入。
对于行内元素和行内块元素，他会锁定离他最近的兄弟元素的x轴坐标作为文档流末尾进行定位ÿ