Clear usage in Div + CSS

The clear attribute was used at the beginning, but it was used relative to float. I still don't quite understand it when I watched the video today. I checked the information and found it.

The clear attribute value has four clear: Both | left | right | none;

Purpose: The value of this attribute indicates that the edge of a floating object is not allowed.
This attribute is used to control the physical location of the float attribute in the Document Stream.

When the float attribute is set, the physical location of the object is already out of the document flow. However, most of the time we want the file flow to recognize float or float) the following elements are not affected by float. In this case, clear: Both; is required.

Clear: Left; no floating element exists on the left of the element;
Clear: Right; indicates that there is no floating element on the right of the element;

Clear: Both; indicates that no floating element exists on both sides of the element;

Clear: none indicates that floating elements are allowed on both sides.

Below is an example of applying a netizen

Clear: both;

CSS definition:
P. F1 {float: Left; width: 100px ;}
P. F2 {float: Left; width: 400px ;}

Then:
<P class = "f1"> 1st items </P>
<P class = "F2"> This is 2nd items </P>
<P> Start another row </P>

The third row above will be placed together with the first row. Why? Because when the attribute is set to float (floating), the physical location of the row is already out of the Document Stream, however, most of the time we want documents
Stream can identify float (floating), or the elements behind float (floating) will not be affected by float (floating). In this case, we need to use clear: both;
Division.

So we should change:

If you do not need to clear the float, the 3rd <p> text will be in line with the first two lines.
So we add a clear floating in the 3rd <p>.
<P class = "f1"> 1st items </P>
<P class = "F2"> This is 2nd items </P>
<P style = "clear: Both;"> Add another row </P>