float把div中的文字挤下去的问题

今天在看代码的时候，发现div里的文字不在div里，无法理解，搜索了一下午的资料后，终于理解了。

代码如下：


结果（绿框代表浮动的div，红框都是非浮动的div）：

第三个div里的a跑到了下面，不在div红框里面

原因：
文本和行内元素会环绕在float元素周边的。
第三个div的文本被浮动元素挤到最下面显示，但是div本身还是在上面的。

参考：
[https://segmentfault.com/q/1010000002908597]