style =“clear：both”有什么用？

Question

我碰巧看到div的风格为clear:both！ clear中style的用途是什么？

<div style="clear:both">

Answer 1

clear:both使元素下降到文档中前面的任何浮动元素下面。

您还可以使用clear:left或clear:right使其仅落在左侧或右侧浮动的元素下方。

+------------+ +--------------------+
|            | |                    |
| float:left | |   without clear    |
|            | |                    |
|            | +--------------------+
|            | +--------------------+
|            | |                    |
|            | |  with clear:right  |
|            | |  (no effect here,  |
|            | |   as there is no   |
|            | |   float:right      |
|            | |   element)         |
|            | |                    |
|            | +--------------------+
|            |
+------------+
+---------------------+
|                     |
|   with clear:left   |
|    or clear:both    |
|                     |
+---------------------+

Answer 2

只需添加RichieHindle的答案，请查看Floatutorial，其中将向您介绍CSS浮动和清算的工作原理。

Answer 3

当您使用没有宽度的float时，该行中仍有一些空格。要阻止此空间，您可以在下一个元素中使用clear:both;。