右侧浮动元素为何会影响左侧浮动元素？

你观察到的右侧浮动元素将左侧浮动元素推至前一个右侧浮动元素下方的现象，完全符合CSS 2.1（及后续CSS版本）中关于浮动元素定位的规则，下面具体拆解背后的原理：

核心规则1：浮动元素的定位优先级与空间检查 #

浮动元素会按照它们在HTML文档中的出现顺序依次定位：

• 先出现的浮动元素（比如你的灰色表格）会先被放置到指定方向（右侧），直到碰到包含块边缘。
• 后续的浮动元素（比如你的黄色左侧浮动div）会尝试尽可能向指定方向（左侧）、尽可能向上放置，但必须满足两个前提：
  1. 不能与任何已经存在的浮动元素（包括左侧和右侧的）重叠；
  2. 当前行的剩余水平空间必须足够容纳该浮动元素的宽度。

如果剩余空间不足（比如表格占据了右侧大部分空间，左侧剩余宽度小于黄色div的10em），那么该左浮动元素会被向下移动，直到找到有足够空间的行——也就是前一个右浮动元素的下方。

核心规则2：clear: right对右侧浮动元素的影响 #

你给表格和右侧容器都设置了clear: right，这个属性的作用是：

强制当前元素的上外边界，必须低于之前所有右侧浮动元素的下外边界。

这会让所有右侧浮动元素垂直堆叠在右侧，形成一列。而后续的左浮动元素在定位时，需要检查每一行的剩余空间：由于最上方的右侧浮动元素（表格）已经占据了右侧空间，左侧剩余空间不足以容纳左浮动元素的宽度，所以只能被推到表格的下方，而非同一行。

为什么所有浏览器表现一致？ #

因为所有现代浏览器都严格遵循CSS规范实现浮动逻辑，这个行为是规范明确要求的，并非浏览器各自的bug或兼容处理。

你的基础CSS代码回顾 #

table { float: right; clear: right; }
div.right { float: right; clear: right; }
div.left { float: left; width: 10em; }

内容的提问来源于stack exchange，提问作者Nux