Question

CSS+div布局中float:left具体解释？

情况1：在一个父div，里放着两个子div （a 和b），想要并排显示，a的position:relative,b没有设置position，必须给a,b均加上float:left，才可以正常显示。如果，只给a加float:left，不给b加，则b显示在a的同一行，且a b重合。
情况2：在一个父div里面放着3个子div（a、b、c），想要ab一行，c在a b的下一行显示。a、b均设置了position:relative,c没有设置position,这个时候，如果给a设置float:left，b、c不设置则可以正常显示。或者a b c均设置float:left，也可以正常显示。
问：为什么在情况2里面，只给a,设置float:left，b不设置float，a、b也不会像情况1一样重合到一起？
如果能帮我分析一下各个情况的原因，那就最好不过了！

Answer 1

希望我的回答对你有帮助，用我的经验并且结合当初学习的教程：
看到你的问题首先针对的问题是float浮动问题，你得显示问题和position没有一丁点关系，因此ab显示和abc显示的问题就是简单的float设置问题，因此你所说的问题有没有设置position效果都是一样，你可以验证一下。css中float的守则就是如果浮动就都浮动，如果不浮动就都不浮动，这样能够很有效的解决你上面的问题，但是也有特殊的情况：例如父div中有abc，a不浮动，bc浮动。这样也显示正常。
至于原因我个人只能按照float脱离文档流来解释了(可以理解成脱离了正常的文档显示顺序)。不知道对你有没有帮助，下面给你一个w3c教程的地址，很权威的标准教程，慢慢学习吧http://www.w3school.com.cn/css/css_positioning_floating.asp

Answer 2

我尝试过您说的两种方法都是会重叠的
float浮动，会脱离文档流（但是文字不会），前面的div浮动了，后面的div就会上前占位，就会出现重叠，如果是情况二，前两个要一排，最后的div在下一排单独显示，就给最后的div加
clear:both;

Answer 3

Vue实践-CSS样式position/display/float属性对比使用