How CSS Parent Div wraps the child div,float div with the Float property how to open the parent div

From the web excerpt

Original code

<style>#div1{Border:1px solid Red;float: Left;}#div2, #div3{float: Right;Border:1px solid Blue;}</style><DivID= "Div1">  <DivID= "Div2">Both</Div>  <DivID= "Div3">One</Div></Div>

Method One

The parent element is set overflow and zoom with the following styles:

Zoom is a private property of ie, meaning almost as clear as floating like

<style>   #div1{border:1px solid red;  Overflow:hidden; Zoom:1;}    #div2, #div3{float:right;  Border:1px solid blue;} </style>

Method Two

<style>   #div1{border:1px solid red;  Float:left;}   #div2, #div3{float:right;  Border:1px solid blue;} </style>

One drawback of this approach is that the width of the parent element needs to be set.

Method Three

<div id= "Div1" >   <div id= "Div2" >two</div>   <div id= "Div3" >one</div>   <div style= "Clear:both" ></div> </div>

This method adds a DIV element, which in some cases may affect the traversal of the element.

How CSS Parent Div wraps the child div,float div with the Float property how to open the parent div