浮动元素 float布局

初学前端，跟随着b站pink老师的528集超好的讲解，几天时间不知不觉已经进去了200集。对于刚接触float布局的人来说，一定有很多奇思妙想，而不管是别人给讲，还是翻阅书籍，都可能存在效果不符合预期的情况，当然，大多数情况都是没什么实用价值的瞎想。今天就总结8个字，帮助像我一样的初学者不留疑惑地接受所有的偏僻情况：横向排斥，纵向覆盖 这里的覆盖只能覆盖后来者。如果觉得不知所云，请看如下三条具体解释。

第一条： 浮动元素往指定方向浮动，直到接触到父级元素的边框或者其他浮动元素的边框，把重叠在它下面的标准流元素往相反方向挤出去(横向排斥性)。

第二条： 浮动元素在纵向上不挤标准流元素（而是水平挤它里面的文字，见第三条），也不会撑大父元素， 所以假设本行只含有浮动元素，那么对于之后出现的标准流元素，如果原本应该出现在下一行，则会向上对齐，重叠在浮动元素的下方(纵向覆盖)；而如果原本应该出现在本行，则会换行(横向排斥)，换了行以后不会再向上对齐， 可以想象成此时这个标准流元素在换行后向左对齐撞到了左侧边框，停下了，比如行内块元素，不管任何元素的大小是怎样的，行内块元素总是本该出现在当前行，这个换行的过程决定了行内块元素永远不可能被压在在浮动元素的下面。

第三条： 浮动元素会把他的父级元素里的文字显示在原处，浮动元素在此处发生局部透明；而浮动元素会把其他被它覆盖了的标准流元素里的文字挤出到它浮动方向的相反方向(文字也是本该出现在本行，亦符合浮动元素的横向排斥性)。

个人理解，专业人士请忽略，如有不当，敬请批评指正。