浮动例子之鉴赏

在浮动原理及清除浮动一文中（http://cherry360.blog.51cto.com/12176744/1864258），简单介绍了浮动的相关基础知识，为了巩固知识点，本篇结合代码展示关于浮动的几个常见例子。

例1：九格子

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>九格子</title><style>body,ul{padding:0;margin:0;}.box{width:300px;height:300px;margin:100pxauto;border-top:1pxsolid#000;border-left:1pxsolid#000;}.boxli{list-style:none;width:99px;height:99px;float:left;border-right:1pxsolid#000;border-bottom:1pxsolid#000;background:#9FC;text-align:center;line-height:99px;}</style></head><body><ulclass="box"><li><imgsrc="http://img.baidu.com/hi/babycat/C_0002.gif"alt=""></li><li><imgsrc="http://img.baidu.com/hi/babycat/C_0020.gif"alt=""></li><li><imgsrc="http://img.baidu.com/hi/babycat/C_0003.gif"alt=""></li><li><imgsrc="http://img.baidu.com/hi/babycat/C_0017.gif"alt=""></li><li><imgsrc="https://cache.yisu.com/upload/information/20200312/65/244936.jpg"alt=""></li><li><imgsrc="http://img.baidu.com/hi/babycat/C_0015.gif"alt=""></li><li><imgsrc="http://img.baidu.com/hi/babycat/C_0005.gif"alt=""></li><li><imgsrc="http://img.baidu.com/hi/babycat/C_0016.gif"alt=""></li><li><imgsrc="http://img.baidu.com/hi/babycat/C_0006.gif"alt=""></li></ul></body></html>

显示结果：

例2：条纹

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>条纹</title><style>body,ul{padding:0;margin:0;}li{list-style:none;}.box{width:500px;padding:10px;background:#ccc;margin:100pxauto;}.boxli{padding:5px0;height:17px;}span{height:17px;float:left;}.left{width:300px;background:yellow;}.right{width:200px;background:pink;}</style></head><body><ulclass="box"><li><spanclass="left"></span><spanclass="right"></span></li><li><spanclass="left"></span><spanclass="right"></span></li><li><spanclass="left"></span><spanclass="right"></span></li><li><spanclass="left"></span><spanclass="right"></span></li><li><spanclass="left"></span><spanclass="right"></span></li></ul></body></html>

显示结果：

例3：钢琴按键

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>钢琴按键</title><style>body,ul{margin:0;padding:0;}li{list-style:none;}.list{width:732px;overflow:auto;border-top:1pxsolid#999;border-left:1pxsolid#999;margin:100pxauto;}.listli{width:60px;height:180px;border-bottom:1pxsolid#999;border-right:1pxsolid#999;float:left;}lidiv{height:100px;background:#000;color:#fff;}li.div2{height:50px;}</style></head><body><ulclass="list"><li><div>1</div></li><li><divclass="div2">2</div></li><li><div>3</div></li><li><divclass="div2">4</div></li><li><div>5</div></li><li><divclass="div2">6</div></li><li><div>7</div></li><li><divclass="div2">8</div></li><li><div>9</div></li><li><divclass="div2">10</div></li><li><div>11</div></li><li><divclass="div2">12</div></li></ul></body></html>

显示结果：


一般情况，一个元素里边所有子元素结构和样式都是一样，那咱们就把这看成是1个列表。以上就是这种情况。