使用span元素clear:both好像无效,请解释一下原理，谢谢。

代码地址：http://jsfiddle.net/6dtg2qcr/2/

<div class="wrapper">
            <div class="div-base div1">
                <h2>1</h2>
            </div>
            <div class="div-base div2">
                <h2>2</h2>
            </div>
            <div class="div-base div3">
                3
            </div>
            <span class="clearfix"></span>
            <!-- <div class="clearfix"></div> -->
            <!-- <br class="clearfix"> -->
        </div>

html,body{
                width: 100%;
                height: 100%;
                margin: 0;
            }
            .wrapper {
                width: 400px;
                margin: 40px auto 0 auto;
                border: 1px solid #cdcdcd;
            }
            .div-base{
                width: 200px;
                height: 100px;
                border: 1px solid blue;
                text-align: center;
                margin-bottom: 10px;
            }
            .div1{
                /* position: relative; */
                /* right: 10px; */
            }
            .div2{
                float: left;
            }
            .div3{
                border: 1px solid red;
                background: red;
                float: left;
            }
            .clearfix {
                clear: both;
            }