Cannot get bottom of Paragraph Box to Wrap around Floated Div - html

Question

I am trying to follow this Mozilla Tutorial on floats and am trying to do the exercises.
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats
I have a left floated div with a Paragraph element to the right of it which has a pink background. I am trying to make the bottom of the Pink Paragraph box wrap around the bottom of the blue Div, and not stop when the text finishes, like it advises me to do in the Mozilla Tutorial. However I am not able to do it at all, and I have tried using all of the methods they have shown.
Please can somebody advise me
I have tried using
Overflow: auto;
Display: flow-root;
body { width:90%;
margin: 0 auto;
background: #AAB7B8;}
.wrapper { display: flow-root;}
.box { border: solid 1px;
background: blue;
border-radius: 5px;
width: 200px;
height: 200px;
float: left;
margin: 20px;
text-align: center;
}
p { background: #F6DDCC;
padding:20px;}
.cleared { clear: left;
background: yellow;}
<div class="wrapper">
<div class="box">
Float
</div>
<p> Many variations of Lorem Ipsum exist today, and sometimes the
text is altered to include humorous phrases.
If you’re going to be using Lorem Ipsum as filler text on your pages,
you need to make sure that the passage doesn’t contain potentially
embarrassing information.
Using our Lorem Ipsum generator, you can easily select a variation to
build your desired number of Lorem Ipsum paragraphs, sentences, or
words.In addition, our generator can insert HTML markup. </p>
<p class="cleared"> when a printer jumbled a gallery of type to
create a type specimen book, Lorem Ipsum has been the industry
standard for dummy text.
Today, a variety of software can create random text that resembles
Lorem Ipsum. For example, Apple’s Pages and Keynote software use
scrambled placeholder text. And Lorem Ipsum is featured on Google
Docs, WordPress, and Microsoft Office Word.
</p>
</div>

Answer 1

If I understand correctly.. something like the below...
All I did was add...
.wrapper { background: #F6DDCC;}
And removed the background color from the paragraph tag.
p { padding:20px;}
So the background color is applied to the containing div and not the paragraph elements.
body { width:90%;
margin: 0 auto;
background: #AAB7B8;}
.wrapper { display: flow-root;}
.box { border: solid 1px;
background: blue;
border-radius: 5px;
width: 200px;
height: 200px;
float: left;
margin: 20px;
text-align: center;
}
.wrapper { background: #F6DDCC; }
p { padding:20px;}
.cleared { clear: left;
background: yellow;}
<div class="wrapper">
<div class="box">
Float
</div>
<p> Many variations of Lorem Ipsum exist today, and sometimes the
text is altered to include humorous phrases.
If you’re going to be using Lorem Ipsum as filler text on your pages,
you need to make sure that the passage doesn’t contain potentially
embarrassing information.
Using our Lorem Ipsum generator, you can easily select a variation to
build your desired number of Lorem Ipsum paragraphs, sentences, or
words.In addition, our generator can insert HTML markup. </p>
<p class="cleared"> when a printer jumbled a gallery of type to
create a type specimen book, Lorem Ipsum has been the industry
standard for dummy text.
Today, a variety of software can create random text that resembles
Lorem Ipsum. For example, Apple’s Pages and Keynote software use
scrambled placeholder text. And Lorem Ipsum is featured on Google
Docs, WordPress, and Microsoft Office Word.
</p>
</div>

Answer 2

You need to wrap box and the paragraph <p> with a div and set the wrapping div with the background color
body {
width:90%;
margin: 0 auto;
background: #AAB7B8;
}
.p-wrapper{
background: #F6DDCC;
padding: 20px;
display: flow-root;
}
.box {
border: solid 1px;
background: blue;
border-radius: 5px;
width: 200px;
height: 200px;
float: left;
margin: 20px;
text-align: center;
}
p { background: #F6DDCC;
padding:20px;}
.cleared { clear: left;
background: yellow;}
<div class="wrapper">
<div class="p-wrapper">
<div class="box">
Float
</div>
<p> Many variations of Lorem Ipsum exist today, and sometimes the
text is altered to include humorous phrases.
If you’re going to be using Lorem Ipsum as filler text on your pages,
you need to make sure that the passage doesn’t contain potentially
embarrassing information.
Using our Lorem Ipsum generator, you can easily select a variation to
build your desired number of Lorem Ipsum paragraphs, sentences, or
words.In addition, our generator can insert HTML markup. </p>
</div>
<p class="cleared"> when a printer jumbled a gallery of type to
create a type specimen book, Lorem Ipsum has been the industry
standard for dummy text.
Today, a variety of software can create random text that resembles
Lorem Ipsum. For example, Apple’s Pages and Keynote software use
scrambled placeholder text. And Lorem Ipsum is featured on Google
Docs, WordPress, and Microsoft Office Word.
</p>
</div>