浮动元素的位置，只参考前一个元素的位置即可

如下图，1、2、3三个元素左浮动，虚线为父容器，此时再添加一个左浮动的元素4，总宽度超出了父元素宽度，那么4号元素的位置应该是这样的？

它的位置不是A也不是B：

浮动元素的位置，其实只参考前一个元素的位置即可。所以元素4的位置只需考虑元素3的位置即可，如下：

我们换一下位置，同理可以得到如下结果（只需考虑元素1的位置）：

PS:

• float属性会导致父元素的高度塌陷，解决方法可查看：CSS float浮动规则以及父元素高度塌陷的解决方法
• 浮动元素的重叠问题：

1. 浮动元素不会覆盖文字内容
2. 浮动元素不会覆盖图片内容（因为图片本身也属于文本，可以把图片看做是一个特殊的文字）
3. 浮动元素不会覆盖表单元素（输入框、单选按、复选框、按钮、下拉选择框等）