測試你的技能：浮動

此技能測試的目的是評估您是否理解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.

嘗試更新下面的即時程式碼以重新建立完成的示例

下載此任務的起始點，以便在您自己的編輯器或線上編輯器中進行操作。