2019-07-09 定位之float

demo：

在上图中，几个div的设置如下：

div5、div6、div9是浮动元素

我们可以看到，浮动元素后面的正常文档流元素会感知不到前面的浮动元素，会往前移动，如果浮动元素遮挡住了后面的非浮动元素，则后面的被遮挡的非浮动元素中的内容会往其后面的元素中移，如果后面元素是浮动元素，则后面浮动元素中内容会被前一个非浮动元素中的内容遮盖，如果后面元素是非浮动元素，则前面一个非浮动元素的内容会被后面非浮动元素中的内容遮盖。并且，虽然非浮动元素藏在前面的浮动元素下面，但是其宽度（width属性）却会影响其内容的显示格式。

由于div8是非浮动元素，其内容遮盖div7中溢出的内容；由于div9是浮动元素，其溢出内容被div7中的内容遮盖

给div7添加clear：both后：

给div7添加clear：both后

可见，对一个前面有浮动元素的非浮动元素使用clear：both后，它就不会藏到前面的非浮动元素下面去了。

给div6添加clear：both后

给div6添加clear：both后：

可见，对一个前面有浮动元素的浮动元素使用clear：both后，它会换行，不再与前面的浮动元素浮动在同一行，但是float的属性及表现不变，它还是一个浮动元素。

---

根据上面两次对clear：both的测试中，我们看到，其作用是前面消除前面浮动元素的浮动影响，另起一行，让人感觉前面的是块级元素一样。

在上图中，几个div的设置如下：

可见，其中，

嗯，div5是浮动元素，div6也是浮动元素

对float元素使用clear：both，虽然浮动元素会换行，但是其依旧是一个浮动元素，后面如果有非浮动元素，还是会跑到之前最近的非浮动元素的下一行，可能会藏在浮动元素下。

为了简单好记，我们可以认为所有的元素其实都是浮动元素，而非浮动元素，它是一种特殊的浮动元素，特殊在它在定位前，会对它后面最近的元素使用一次clear：both，当然，这仅仅从换行角度来说，不涉及left、top等属性。