float Property in CSS

This thing is called floating.
as the name suggests, is to allow the set of the label to have a floating effect, that is, from the original page of the standard output stream.
normally, block elements in an HTML page are arranged from top to bottom. If you want to implement the left and right structure.
a choice of float (and of course there are other ways).
such as
<div style= "widht:500px" >
<div style= "float:left;width:200px" > left </div>
< Div style= "float:left;width:200px" > Right </div>
</div>
In this way, this two div tag is on the same line (while on the left), of course, there is a prerequisite, Just the two of them. The width of the parent element must be at least greater than 400px to be on the same line. The result is two Div's right will be vacated by 100PX blank
<div style= "widht:500px" >
<div style= "float:left;width:200px" > Left </div>
<div style= "float:right;width:200px" > Right </div>
</div>
above, is also in the same line. The difference is that one is on the left and one on the right.
here is a 100PX gap in the middle of the two Div.

Note that when the label uses the float property, it is out of the standard output stream and is not bound by the page. This is inconvenient and is not conducive to page layout.
therefore, after the general float to clear the float.
<div style= "widht:500px" >
<div style= "float:left;width:200px" > left </div>
<div style= "float:right;width:200px" > Right </div>
<span style= "Clear:both" ></span>
</ Div>
This way, the overall layout structure of the page is basically not broken.