为什么右浮动元素会影响左浮动元素？

Question

右浮动通过在右浮动元素之前将其推到一个以下来影响左浮动...我知道这在所有浏览器中都是一个东西，但我无法绕过这个。为什么这是一件事？这是一个向后兼容的东西或所有浏览器中的错误（检查Firefox，IE，Edge，Chrome）。有些规格确实需要这种行为吗？

基本CSS（表格为灰色，左侧浮动为黄色，右侧浮动包装为绿色边框）：

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

完整代码： http://jsbin.com/deyejit/edit?html,css,output

请注意。这不是一个哲学问题;-)。我正在寻找这背后的实际推理和算法。

Answer 1

请注意如何删除clear: right“修复”对齐问题。当你有第二个右浮动元素时，你正在清除右浮动，这意味着任何后续浮动元素 - 左或 - 将出现在你清除的元素下面。

似乎很简单：D

“包装器”解决方案解决了这个问题，因为您在左浮动框之前不再有任何clear: right元素。