使用float属性构建侧滑框

使用float属性构建侧滑框原理：

/**统一盒模型*/
*{
    box-sizing:border-box;
}
/**本行中自动（随侧边滑动框滑动）改变宽度的内容*/
.content{
    display:block;
    overflow:hidden;
}

/** 通过改变滑动框的宽度来实现滑动的效果 可以使用animate添加一次性的动画*/

.slide{
    float:right;
    width:0;   
    position:relative;
}

.slideContent{
    position:absolute;
    left:0;
    top:0;
    width:**px; // 这里的宽度就是在设计动画的时候设置的slide的最大宽度，如果还有边距之类的需要额外加到slide的宽度上
}

<div>
    <div class="content"></div>
    <div class="slide">// 侧边栏
        <div class="slideContent">  //侧边栏所包含的内容 固定宽度
        </div>
    </div>
</div>

这里重点就是需要在.content中添加overflow属性，如果没有的添加的话然后在content中添加设置100%宽度的元素会换行，也即是在float元素该行不能在存放一个行内元素，必须要设置overflow:hidden这样才能和.slide并列排布；

（说实话，我还没搞明白为什么还必须要设置这个overflow:hidden否则就不能并排排布；按照我的理解设置了float:right之后该浮动元素就脱离普通文本流了吗？然后左侧的content不就自动适应了，然后在里面添加块级元素不就相对于该.content元素的100%宽度吗？为什么还必须要添加overflow昵？希望有理解具体原理的老师能解释一下我的疑惑）