-
Notifications
You must be signed in to change notification settings - Fork 22.5k
/
index.md
58 lines (36 loc) · 2.84 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
---
title: "Test your skills: Floats"
slug: Learn/CSS/CSS_layout/Floats_skills
page-type: learn-module-assessment
---
{{LearnSidebar}}
The aim of this skill test is to assess whether you understand [floats in CSS](/en-US/docs/Learn/CSS/CSS_layout/Floats) using the {{CSSxRef("float")}} and {{CSSxRef("clear")}} properties and values as well as other methods for clearing floats. You will be working through three small tasks that use different elements of the material you have just covered.
> [!NOTE]
> You can try solutions in the interactive editors on this page or in an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
>
> If you get stuck, you can reach out to us in one of our [communication channels](/en-US/docs/MDN/Community/Communication_channels).
## Task 1
In this task, you need to float the two elements with a class of `float1` and `float2` left and right, respectively. The text should then appear between the two boxes, as in the image below:
![Two blocks displaying left and right of some text.](float-task1.png)
Try updating the live code below to recreate the finished example:
{{EmbedGHLiveSample("css-examples/learn/tasks/float/float1.html", '100%', 900)}}
> [!CALLOUT]
>
> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/float/float1-download.html) to work in your own editor or in an online editor.
## Task 2
In this task, the element with a class of `float` should be floated left. Then we want the first line of text to display next to that element, but the following line of text (which has a class of `below`) to display underneath it.
Your final result should look like the image below:
![A box displayed to the left of a line of text, with some more text below.](float-task2.png)
Try updating the live code below to recreate the finished example:
{{EmbedGHLiveSample("css-examples/learn/tasks/float/float2.html", '100%', 800)}}
> [!CALLOUT]
>
> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/float/float2-download.html) to work in your own editor or in an online editor.
## Task 3
In this task, we have a floated element. The box wrapping the float and text is displaying behind the float. Use the most up-to-date method available to cause the box background to extend to below the float, as in the image below:
![A block displayed to the right of some text both wrapped by a box with a background color.](float-task3.png)
Try updating the live code below to recreate the finished example:
{{EmbedGHLiveSample("css-examples/learn/tasks/float/float3.html", '100%', 800)}}
> [!CALLOUT]
>
> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/float/float3-download.html) to work in your own editor or in an online editor.