在同一个元素上浮动和清除如何工作？答案

【问题标题】：How does floating and clearing on the same element work?在同一个元素上浮动和清除如何工作？
【发布时间】：2012-07-30 22:21:18
【问题描述】：

我之前正在复习我的 CSS 技能，但我遇到了一个让我秃顶的教程。这是链接：http://css.maxdesign.com.au/floatutorial/tutorial0304.htm我已经花了几个小时研究这个问题的答案，但没有发现任何对我有帮助的东西。

本教程的作者没有详细说明元素的情况。我知道浮动将元素从页面上抬起并沿给定方向（左/右）浮动。清除会重置浮动元素并将其放回页面流中。

如果右侧已被清除，这些元素如何仍向右浮动？我不明白这背后的逻辑。对此的任何澄清将不胜感激也许我可以保留一些头发。

编辑：这是上面链接的教程中的 CSS 代码和屏幕截图...

.floatright {
    float: right;
    margin: 0 0 10px 10px;
    clear: right;
}

p { margin-top: 0; }

【问题讨论】：

标签： html css css-float

【解决方案1】：

你误解了清算。 clear: right 仅表示该元素应垂直清除同一上下文中所有先前的右浮动元素，换句话说，它应该低于所有其他右浮动元素。可视化：

|                          |
|            +-----++-----+|
|            |  A  ||  B  ||
|            |     ||     ||
|            +-----++-----+|
|                   +-----+|
|                   |  C  ||
|                   |     ||
|                   +-----+|
|                          |

所有元素都向右浮动，但 C 设置为 clear: right，因此它低于之前的浮动元素。

【讨论】：

所以为了确保我理解正确，框 [a]、[b] 和 [c] 将作为 [c]、[b]、[a] 向右浮动。如果 [a] 有 clear: right 应用于它，它不会下拉，因为右侧没有要清除的内容。但是，如果 [b] 具有该属性，那么它将在其左侧下拉 [c]。
不确定解释是否很清楚，但是，是的：如果所有元素都应用了clear: right，它们都会简单地垂直堆叠。这通常是想要的效果，将一些图片直接浮动在文本正文中，而不会让它们水平堆积。
这是我解释的代码。 jsfiddle.net/ZdAwM 看看你能不能明白我现在想说什么。我想我已经掌握了它背后的基本思想。希望更多的事情会来找我。
好的，是的。在该示例中，b 清除了 a，即下降到它之下。任何以下元素也将自动下降到至少b 的级别。由于c 也是浮动的，它与b 水平堆积。
感谢您的所有帮助。我明白它现在是如何工作的。我不明白 clear 属性，因为我认为它会导致浮动被覆盖并推回页面。就像在说“如果我的右边有一个元素，清除它并下拉”。

【解决方案2】：

浮动：对；意味着元素应该向右浮动（在其父容器中向右对齐，父容器的非浮动内容在其周围流动）。如果 HTML 中多个右浮动元素相互跟随，那么它们将全部相邻放置，直到父容器已满，此时出现换行符。

clear 属性指定是否允许在元素中出现浮点数。这与元素是否浮动无关。清除：right 表示右侧不允许浮动元素。

所以 float: right 在示例中确保图像向右浮动，文本在它们周围流动。 clear: right 确保图像彼此下方而不是一行。

【讨论】：

【解决方案3】：

当你浮动一个元素并明确一个方向时，你基本上（简单来说）在文档流中添加一个分页符。如果被清除的元素后面跟着另一个浮动元素，在相同的方向上，它当然会向右浮动，但出现在第一个浮动元素的下方。

这是一个包含两组浮动元素的示例，一组带有清除，一组带有。

http://jsfiddle.net/Kyle_Sevenoaks/detxc/

希望对你有所帮助:)

【讨论】：