css4-- float

<! DOCTYPE HTML> 
<HTML lang = "EN"> 
<head> 
    <Meta charset = "UTF-. 8"> 
    <style> 
   .box1 { 
       / * height: 200px; father nesting box for convenient height * / 
       width : 600px; 
       background-Color: Pink; 

       overflow: hidden; 


   } 
   .clearfix: After { 
       Content: ""; 
       the display: block; / * converted into block-level element * / 
       height: 0px; 
       visibility: hidden; 
   / * * box Hide / 
   } 
        .box2 { 
            width: 600px; 
            height: 240px; 
            background-Color: Purple; 
        } 
        .son1 { 
           width: by 150px;
            height: 100px;
            background-color: skyblue;
            float: left;
        }
        .son2{
            width: 300px;
            height:100px ;
            background-color: hotpink;
            float: left;
        }
        /*.clear{*/
        /*    clear: both;*/
        /*}*/
        .clearfix:after {
            clear: both;
        }
        .clearfix{
            *zoom:1;
        }
    </style>
    <title>Title</title>
</head>
<body>
<div class="box1 clearfix">
    <div class="son1"></div>
    <div class="son2"></div>
<! - an empty box plus additional advantage tagging floating box behind the relatively simple structured disadvantage loosely -> 
<! - <div class = "Clear"> </ div> -> 
</ div> 
< class = div "BOX2"> </ div> 
</ body> 
</ HTML>
Guess you like
