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

Question

我之前正在刷我的CSS技能,我遇到了一个让我秃顶的教程.这是链接:http://css.maxdesign.com.au/floatutorial/tutorial0304.htm我花了几个小时研究答案,但没有遇到任何帮助我的事情.

本教程的作者没有提供有关元素的详细信息.我知道浮动会从页面上抬起一个元素并将其浮动到给定方向(左/右).清除重置浮动元素并将其放回页面流中.

如果右侧被清除,那些元素如何仍然向右浮动？我不明白这背后的逻辑.对此的任何澄清都将深表感谢,也许我可以保留一些头发.

编辑:这是CSS代码和上面链接的教程的截图...

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

p { margin-top: 0; }

Answer 1

你对清算有误解。clear: right只是意味着该元素应该垂直清除同一上下文中所有先前右浮动的元素，换句话说，它应该下降到所有其他右浮动元素的下方。可视化：

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

所有元素都向右浮动，但C设置为clear: right，因此它会下降到之前浮动元素的下方。