How do I get two div-side layouts? __div

Before effect:

After effect:

Reason: DIV is block level element, exclusive row

Procedure: 1, when adding "float:left;" to the first Div alone, the following effects occur

Analysis: A, the div's width and height set different viewing effect. b, set float after the div is like a piece of paper jumped out of the horizontal plane, and the second div on the horizontal surface, rendering a covering phenomenon. So if you want two div side, then add "Float:left" in the two div style.

2, when the two div followed by a normal div (that is, set the width and background color only),

3, when I put the second Div set right float, the first set left float, the third does not float, the effect

The reason is: three pieces of paper, the first and second paper is floating on the top of the water, the third is in the water level, and people from the top of the river down, looking down the effect of the view. The normal elements are formatted in the HTML page, the HTML is similar to the water level, the elements are in order, so the third piece of paper is in the bottom of the first sheet.

What side effect does this have?

The following ordinary div is overwritten

1, if the third div do not want to be the first Div overlay then the third div style plus "clear:left;" (That is, the third Div header does not allow left floating div again above) (--as I understand, should be block-level elements of the reason)

2. When the third div style is: width:100%;clear:left and the second div style is: height:200px;width:100px;