浮动的学习

    浮动，一个让我们既喜欢，又不喜欢的一种属性，怎么说呢？喜欢是因为，通过浮动，我们可以很方便的布局；不喜欢是因为，浮动之后遗留下来了太多的问题，比如这次编写网页就用到了浮动，也就出现了问题：

     下面就来看看：

<div id="wrapper">
    <div>first</div>
    <div>second</div>
    <div>third</div>
</div>

     这时，就会：

 

     a、当3个子div全部向左浮动时，会看到3个子div靠左排成一排；

    b、当第一个和第二个div向左浮动，第三个div不设置任何的浮动，会看到与a的情况相同；

    c、当第一个和第二个div向左浮动，第三个div清除浮动，会看到前两个div排成一排，而第三个div跑到了下一行。

     因此，可知，我们必须的使用清除浮动啦；

清除浮动的两种方法：

   首先，使用clear方法：

.wrapper{
    clear:both;
}

 

    其次可以使用overflow方法：

.wrapper{
    overflow:hidden;
}
//或者
.wrapper{
    overflow:auto;
}