A c-ray people's CSS experiment-Padding and Float

<Html>
<Head>
<Title> </title>
<Style type = "text/css">
# Father
{
Border: solid 1px #0f0;
}
# Father div
{
Background-color: # eeb0b0;
Padding: 25px;
Border: dashed 3px #000;
}
Div. special
{
Float: left;
}
</Style>
</Head>
<Body>
<Div id = "father">
<Div class = "special">
This is a devision! </Div>
<Div class = "special">
This is a devision! </Div>
<Div style = "padding-left: 500px;">
This is a devision! </Div>
<Div>
This is a devision! </Div>
<P>
This is a paragraph! This is a paragraph! This is a paragraph! This is a paragraph! This is a paragraph!
This is a paragraph! This is a paragraph! This is a paragraph! This is a paragraph! This is a paragraph!
This is a paragraph! This is a paragraph!
</P>
</Div>
</Body>
</Html>
Test 1: Why is the distance between a red frame added for every Div floating?
Suddenly, it was found that after the ghost was set to Float, the Div set to Float actually retains the padding settings, the Div following its ass grabs this line of floatDiv. Because the distance between Padding-left is smaller than the width and length of float Div, It is closely followed by the length of FloatDiv by default.

Test 2: To prove the previous idea, the first two Float divs retain their own padding. Since the third Div occupies this row, the left padding is not big enough. It can only be placed next to the second Div.
Test 3: Add padding-left: 500 to the third Div, and the third Div is separated.

Conclusion: this is the case.