Question

css浮动元素float：left第二行为什么靠右了？

如图！想知道是什么原理，以及如何操作。





Answer 1

这个应该是受到了兄弟元素浮动的影响，给靠右的元素添加一个caler:both;来清除浮动就可以了，。。。。。。。刚刚看你你发的图，这个是因为你的大盒子装不下了，溢出了

追问

你好，兄弟！是因为宽度不够而溢出了吗？为什么溢出后不是在第二行的左边位置而是右边呢？

追答

因为浏览器没有人类这么聪明啊，它只知道放不下了，
而你又给了所有的li一个浮动，所以它是被挤下来的，
但是，它虽然被挤下来了，它还是没有忘记它是要浮动的，
所以就变成了这样。（你也可以这样想，它本来是在浮动在最右边的，
结果被挤下来了，但是它还是想往原来的位置挤的啊，所以就是这个样子了）

追问

啊，为什么这个又知道往左靠呀！？（不好意思一直问你）

Answer 2

破案了,刚遇到了这个问题, 觉得也是莫名其妙的.
实际是因高度未设置或未固定高度.
举例比如靠左浮动, 一行显示2个产品, 然后发现第3个产品在第二行靠右又独占一行了.
原因我举个例子，产品1高度为10,产品2高度为9.99,这样子产品3就会被硬塞到产品2下面去了,其实程序认为第三个因宽度不够已经换行了,并确实是靠左浮动的，只不过第二行的开始是从产品1后面接上去的，所以你看起来他们是两行而产品3还莫名其妙靠右了.
给每个产品一个相同高度就ok
题主你放大图片看就知道了, 你每个桌球杆的黄色边框都不一样高.

Answer 3

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