CSS clearing area

 
  Clear area: in Css2.1 A clearing area is introduced, when used as an element Clear The margin does not change, but the clearing area causes the element to fall under the floating element.

1 < Style Type = " Text/CSS " >
2 * {Margin: 0 ; Padding: 0 ;}
3 P {border: 1px #66cc00 solid ;}
4 IMG {
5 Width: 40px;
6 Height: 40px;
7 Float : Left;
8 Border: 1px #66cc00 solid;
9 }
10 H3 {
11 Clear: both;
12 Border: 1px #66cc00 solid;
13 }
14 Div {padding: 20px; width: 400px; Height: 400px ;}
15 < / Style>
16 < / Head>
17
18 < Body >
19 < Div >
20 < P > I am above < / P>
21 < IMG SRC = " Qq.png "   / >
22 < H3 > Below I am < / H3>
23 < / Div>

Effect:

 

H3 Settings margin-top try:

1 H3 {
2 Clear: both;
3 Border: 1px #66cc00 solid;
4 Margin-Top: 30px;
5 }

To see the effect:

unchanged, the clearing area is working. Change the following:

1 H3 {
2 clear: Both;
3 border: 1px #66cc00 solid;
4 margin - top: 60px;
5 }

Effect:

 

With16pxDistance, we can understand thisMarginCompared with the calculation of "I am on top", this clearing area is actually a bit strange. We can simply set it as follows:

1 < Style Type = " Text/CSS " >
2 * {Margin: 0 ; Padding: 0 ;}
3 P {border: 1px #66cc00 solid ;}
4 IMG {
5 Width: 40px;
6 Height: 40px;
7 Float : Left;
8 Border: 1px #66cc00 solid;
9 Margin - Bottom: 20px;
10 }
11 H3 {
12 Clear: both;
13 Border: 1px #66cc00 solid;
14 }
15 Div {padding: 20px; width: 400px; Height: 400px ;}
16 < / Style>
17 < / Head>
18
19 < Body >
20 < Div >
21 < P > I am above < / P>
22 < IMG SRC = " Qq.png "   / >
23 < H3 > Below I am < / H3>
24 < / Div>

Effect:
Ideal results!

Set the outer margin for the floating element instead of the "I am below" (clear the element). The problem is solved!