Float left — practice exercise

What you'll be asked to do

1. 1.Float leftexercise · easy · 10 min

   Float #box to the left.

   Passes when: Float #box to the left.

2. 2.Float rightexercise · easy · 10 min · practice plan

   Float #box to the right.

   Passes when: Float #box to the right.

3. 3.Clear a floatexercise · easy · 10 min · practice plan

   Make #text clear both floats.

   Passes when: Make #text clear both floats.

4. 4.Clear one sideexercise · easy · 10 min · practice plan

   Make #text clear left floats only.

   Passes when: Make #text clear left floats only.

5. 5.Contain floats with flow-rootexercise · medium · 10 min · practice plan

   Use display: flow-root on the wrapper.

   Passes when: Use display: flow-root on the wrapper.

6. 6.Fix the misspelled propertybug fix · easy · 8 min

   The property is float.

   Passes when: The property is float.

7. 7.Fix the wrong directionbug fix · easy · 8 min · practice plan

   The box should float right.

   Passes when: The box should float right.

8. 8.Fix the invalid clear valuebug fix · easy · 8 min · practice plan

   "all" is not a clear value; use both.

   Passes when: "all" is not a clear value; use both.

9. 9.Fix clear applied to the float itselfbug fix · easy · 8 min · practice plan

   The clearing belongs on the following element.

   Passes when: The clearing belongs on the following element.

10. 10.Fix the overflow hackbug fix · easy · 8 min · practice plan

    Use display: flow-root instead of overflow to contain floats.

    Passes when: Use display: flow-root instead of overflow to contain floats.

Between them these tasks cover float left and right, clear and Modern alternatives.

Looking for a different chapter? See every practice set, or switch to the interview theory questions.