5

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

本教程的作者没有提供任何关于元素的详细信息。我知道浮动将元素从页面上抬起并沿给定方向（左/右）浮动。清除会重置浮动元素并将其放回页面流中。

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

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

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

p { margin-top: 0; }

在此处输入图像描述

4

3 回答 3

4

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

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

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

于 2012-07-26T06:54:11.573 回答
0

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

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

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

于 2012-07-26T06:53:12.007 回答
0

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

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

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

希望它可以帮助你:)

于 2012-07-26T06:53:17.780 回答