Css layout-common methods to clear float

1 <div class = "container"> 2 <div class = "block1"> child element 1 </div> 3 <div class = "block2"> child element 2 </div> 4 </div>

.block1{ width:200px;              height:200px;          background: #CBA627;          float:left;          margin-right:10px;}.block2{ width:200px;              height:100px;          background:#009900;          float:left;}

For example, when using div + css to write a page, you often need to use the float style for left and right column layout. However, after the float style is applied to the child element, the height of the parent element disappears because of the float. Therefore, some methods are often required to clear the float. The solution is as follows:

(1) Add an empty label after the floating element and add the style {clear: both} to the label as follows:

<Div class = "container1"> <div class = "block1"> child element 1 </div> <div class = "block2"> child element 2 </div> <div class = "clear"> </div>

/* The style of the child element remains unchanged */. block1 {width: 200px; height: 200px; background: # CBA627; float: left; margin-right: 10px ;}. block2 {width: 200px; height: 100px; background: #009900; float: left;}/* the style of the new empty label is clear */. clear {clear: both ;}

(2) Add a style for the parent element containing floating elements (as shown below). zoom is compatible with ie6:

.container{ overflow:hidden;            zoom:1;}

(3) Add a style to the pseudo class of the parent element that contains floating elements (as shown below). The newly added style is indispensable:

.container:after{ content:" 20";visibility:hidden;display:block;clear:both;height:0;}

(4) Add a style {float: left;} to the parent element. This method is not recommended !!!