Test your skills: Floats
The aim of this skill test is to help you assess whether you understand floats in CSS using the float and 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: To get help, read our Test your skills usage guide. You can also reach out to us using one of our communication channels.
Floats 1
To complete this task, float the two elements with classes of float1 and float2 to the left and right, respectively. The text should then appear between the two elements.
The starting point of the task looks like this:
Here's the underlying code for this starting point:
<div class="box">
<div class="float float1">One</div>
<div class="float float2">Two</div>
<p>The two boxes should float to either side of this text.</p>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
* {
box-sizing: border-box;
}
.box {
padding: 0.5em;
}
.float {
margin: 15px;
width: 150px;
height: 150px;
border-radius: 5px;
background-color: rebeccapurple;
color: white;
padding: 1em;
}
.float1 {
/* Add styles here */
}
.float2 {
/* Add styles here */
}
The layout should look like this once the task is complete:
Click here to show the solution
You can use float for both boxes:
.float1 {
float: left;
}
.float2 {
float: right;
}
Floats 2
To complete this task:
- Float the element with a class of
floatto the left. - Update the code so that the first line of text displays next to that element, but the following line of text (which has a class of
below) displays underneath it.
The starting point of the task looks like this:
Here's the underlying code for this starting point:
<div class="box">
<div class="float">Float</div>
<p>This sentence appears next to the float.</p>
<p class="below">Make this sentence appear below the float.</p>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
* {
box-sizing: border-box;
}
.box {
padding: 0.5em;
}
.float {
margin: 15px;
width: 150px;
height: 150px;
border-radius: 5px;
background-color: rebeccapurple;
color: white;
padding: 1em;
}
.float {
/* Add styles here */
}
.below {
/* Add styles here */
}
The finished layout should look like this:
Click here to show the solution
You need to flow the item left, then add clear: left to the class for the second paragraph:
.float {
float: left;
}
.below {
clear: left;
}
Floats 3
In this task, we have a floated element. The background box that wraps the float and the text does not currently extend underneath the floated element.
To complete this task, use the most up-to-date method to ensure the background box contains the floated element and extends underneath it.
The starting point of the task looks like this:
Here's the underlying code for this starting point:
<div class="box">
<div class="float">Float</div>
<p>This sentence appears next to the float.</p>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
* {
box-sizing: border-box;
}
.box {
padding: 0.5em;
}
.float {
margin: 15px;
width: 150px;
height: 150px;
border-radius: 5px;
background-color: rgb(207 232 220);
padding: 1em;
color: white;
}
.box {
background-color: rebeccapurple;
padding: 10px;
color: white;
}
.float {
float: right;
}
.box {
/* Add styles here */
}
When you complete the task, the background box and floated element should look like this:
Click here to show the solution
Clear the box underneath the floated item by adding display: flow-root to the class for .box.
Other methods might be to use overflow or a clearfix hack, however the learning materials detail the flow-root method as the modern way to achieve this.
.box {
display: flow-root;
}