html – 如何在同一元素上浮动和清除工作?

前端之家收集整理的这篇文章主要介绍了html – 如何在同一元素上浮动和清除工作?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

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

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

p { margin-top: 0; }
最佳答案
你误解了清算. clear:right只是意味着元素应该在同一个上下文中垂直清除所有先前右浮动的元素,换句话说,它应该落在所有其他右浮动元素之下.可视化:

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

所有元素都向右浮动,但C设置为clear:right,因此它会降低到先前浮动元素的下方.

猜你在找的HTML相关文章