前言
float在早期，是让多个元素位于同一行的手段。
排查
clear:both;
后面的元素使用了clear:both;
这个一般是不用提的，如果是自己写的肯定是知道clear什么作用的。然而如果是查看别人页面的代码，很可能忽视这个问题。比如修改博客园主题。
文字
float占满了当前行，float后面的元素内容是文字，文字不会处于浮动元素下方。 然而如果文字的容器不是内联元素。文字的容器依然会正常布局，比如如果他设定了大小，而且比浮动元素更小，那么它将被浮动元素完全盖住，然后只有文字出来了。如果没有设定大小，他将扩张直到能够容纳文字元素。
后面的元素是BFC元素。
BFC元素不会被浮动元素覆盖，因此，通常来说，他会处于浮动元素的右侧。
然而，我们可能给BFC元素设置了一个较大的宽度，使得其宽度和float元素加起来>父盒子，从而换行。
这个现象我想了半天，后面才理解。
父容器(蓝色)处于上面，宽度正常（被float元素盖住一部分），能够容纳flex元素，然而flex元素(绿色)却换行了，不仅换行了，而且还不处于父容器里面了。
