重构中的BUG集锦

<div class="wrapper">
   <div class="wrapper2 clearfix" id="wrapper2">
       <div class="fl box1" id="box1">box1</div>
       <div class="fl box2" id="box2">box2</div>
   </div>
</div>

.clearfix:after {content: ""; display: block; clear:both;}

    .clearfix {zoom: 1;}

    .fl {float: left;}

    .wrapper {width: 502px; background-color: yellow; margin: 20px auto;
    }

    .wrapper2 {
        border: 1px solid black;
        /*width: 500px*/
    }

    .box1 {width: 200px; background-color: red; height: 200px;}

    .box2 {width: 300px; background-color: green; height: 200px;}

<div class="wrapper">
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
</div>

.wrapper {
        width: 300px;
        padding: 20px 0;
        border: 1px solid black;
        margin: 20px auto;
    }

    .box {
        width: 5px;
        height: 5px;
        background-color: black;
        margin: 20px auto;
    }