Problems encountered in writing a page with Html+css

First, clear the float.

(1) Verflow:hidden; This CSS style is common to the CSS style, but most people's understanding of this style is confined to hidden overflow, and the meaning of clear floating is not very understanding. When it comes to clearing floats, we'll think of another CSS style: Clear:both, I'm sure there's no problem with the understanding of this property.

Verflow:hidden clears the float as follows: (Style the box div is the parent element of the style content div)

. box{
background: #000;
width:300px;
Overflow:hidden;
         } 
. Content {
Float:left;
width:200px;
height:200px;
background:red;
         }

box sets the Overflow:hidden to clear the float of content, so the height of the box changes depending on the content height. If box is not set Overflow:hidden, then the high content will not affect the height of box.

(2) Clear:both; The value of this property indicates that the edge of a floating object is not allowed. This property is used to control the physical location of the float property in the document flow.

When the property is set to float (float), its physical location is out of the document flow, but most of the time we want the flow of the document to recognize float (float), or want to float (float) After the element is not affected by float (float), this time we need to use clear: Both; to clear.

Style <style>

. p1{
Float:left;
width:200px;
Background:darkgoldenrod;
}
. p2{
Float:left;
width:400px;
Background:darkmagenta;
}
. p3{
Clear:both;
}

</style>

The code in HTML

<p class= "P1" > This is the 1th column,</p>
<p class= "P2" > This is the 2nd column,</p>
<p class= "P3" > This is the 3rd column. </p>

If the third column is not Clear:both, then the third column is appended to the second column, followed by the second column.

Problems encountered in writing a page with Html+css