为什么漂浮然后清楚

Question

向左漂浮然后向左清除是什么意思。或向左浮动，然后向右清除？任何人都可以帮我理解这一点。我不是一个CSS人，但需要了解我正在使用的一些CSS。

#elem1{
    float:left;
    clear:left;
}

#elem2{
    float:left;
    clear:right;
}

Answer 1

如果将两个元素浮动在一起，如果不应用清除，它们将在同一水平轴上对齐。

通过告诉浮动元素清除它，它会清除之前的任何浮动，然后在设计者想要浮动它的任何地方浮动它。根据清晰的方向，它会在新的一行上进行。

有关可视化效果，请参阅此jsFiddle example。前两个<div>没有清除任何内容，而最后两个<div>设置为清除左右浮动。

Answer 2

clear表示将元素放置在以下任何浮动元素下方，以“清除该行”。

通常浮动元素会像这样堆积在同一行：

--- --- ---
| | | | | |
--- --- ---

清除任何先前的浮动元素将使它们像这样排列：

---
| |
---
---
| |
---
---
| |
---

Answer 3

以下是为什么需要明确的更清晰的观点。 http://www.quirksmode.org/css/clearing.html