前端开发之浮动应用

浮动的特性和基础讲完了。现在说说应用，欢迎留言提提它在其他地方的应用。

        假如有这样一个场景，div的宽度是800px；高度需要
    在初期内容少只有3个，一个是200px。于是用浮动，让元素
    一个接一个的排开，形成排版。          

代码：

html：
   <div class="main">
        <ul>
            <li><div class="body b1"></div></li>
            <li><div  class="body b2"></div></li>

        </ul>
        <br clear="all"/>
    </div>
css:
.main{
    margin: 0 auto;
    width: 800px;
    overflow: hidden;
    background-color: #98c22a;
}
ul{
    float: left;
    margin: 0;
    padding: 0;
}
li{
    float: left;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.body{
    margin: 0;
    width: 200px;
    height: 50px;
    background-color: #FFFFFF;
}
.b1{
    background-color: #000000;
}
.b2{ background-color: #0000C6}    

效果如图：

好了，现在内容变多了，变成了4个，按说一个200px是没问题的。只是显得有点挤。
效果如下图：

试想一下，万一哪天上级抽风，说每个子元素的宽度改大点。改为205px；好了页面效果变成了这样。

你怎么去给他解释后面的这块空白，换句话说，他希望紫色的div不要换行，继续在后面接着，哪怕被隐藏一部分。
这时呢，就需要借助有overflow的元素的宽度和没有overflow的元素的宽度的差值了。在这个页面中就是ul与div.main之间的差值。也就是说，利用父元素的父元素的宽度与父元素的宽度的不一致，使得当前元素能在这个情况下不换行。

       我把这个现象称为元素欺骗。由于元素最多只能看到父元素和子元素，比如这个例子中，作为当前元素，它并不关心父元素的父元素（div.main）的宽度和overflow。它只知道父元素（li或者ul）的宽度，因为li元素没有宽度所以不用管它。div.main的宽度是800px，而每个div的宽度是200px，4个充满了，现在变为了205px，总宽度变为了820px>800px，第四个（紫色的div）不能被容下，所以不得已第四个换行了。但是一旦修改ul的宽度为820px，此时div.main的宽度是800px，但是li或者子元素（div）不管div.main，它只知道ul是810px，所以刚好能容下4个，所以不会换行。变成了这样。

紫色不换行了。

还有在ul与li出现时，特别是li浮动时，推荐此时让ul也浮动，让后给ul清除浮动。

这是最简单的浮动应用了！欢迎提出更多应用的场景！