测试你的技能：浮动

此技能测试的目的是评估您是否理解CSS 中的浮动，包括使用float和clear属性和值，以及其他清除浮动的方法。您将完成三个小型任务，这些任务使用您刚刚学习的材料的不同部分。

注意：您可以在此页面上的交互式编辑器中或在线编辑器（如CodePen、JSFiddle或Glitch）中尝试解决方案。

如果您遇到困难，可以通过我们的沟通渠道之一联系我们。

任务 1

在此任务中，您需要分别将具有float1和float2类的两个元素向左和向右浮动。然后文本应显示在两个框之间，如下面的图像所示

Two blocks displaying left and right of some text.

尝试更新下面的实时代码以重新创建完成的示例

下载此任务的起始点，以便在您自己的编辑器或在线编辑器中进行操作。

在此任务中，具有float类的元素应向左浮动。然后我们希望第一行文本显示在该元素旁边，但下一行文本（具有below类）显示在其下方。

最终结果应如下面的图像所示

A box displayed to the left of a line of text, with some more text below.

尝试更新下面的实时代码以重新创建完成的示例

下载此任务的起始点，以便在您自己的编辑器或在线编辑器中进行操作。

在此任务中，我们有一个浮动元素。包含浮动和文本的框显示在浮动后面。使用可用的最新方法使框背景扩展到浮动下方，如下面的图像所示

A block displayed to the right of some text both wrapped by a box with a background color.

尝试更新下面的实时代码以重新创建完成的示例

下载此任务的起始点，以便在您自己的编辑器或在线编辑器中进行操作。