浮动原理及清除浮动
站在用户的角度思考问题，与客户深入沟通，找到陕西网站设计与陕西网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：
网站设计、网站制作、企业官网、英文网站、手机端网站、网站推广、
域名注册、虚拟空间、企业邮箱。业务覆盖陕西地区。
上节回顾
在上节的《Web前端入门学习（4）—— 块级元素和行内元素之特征与转换》中(http://cherry360.blog.51cto.com/12176744/1863945)，介绍了块级元素和行内元素的特征，及粗略介绍了如何进行转换。加上display属性，可以指定元素的类型，如display:block、display:inline，以及display:inline-block。当然用得最多的是最后一个display:inline-block。结合例子来看：
例1：
无标题文档
div1
div2
span1
span2
显示结果：
例2，如果在css样式中加上display:inline-block,即把CSS样式改成：
div,span{
height:100px;
width:100px;
background:blue;
border:1px solid red;
display:inline-block;
}显示效果将会变成：
从上面的对比结果可以看出，属性display:inline-block的效果是，可以把块级元素在同一行内显示，而行内元素也变得支持宽高。但是使用这种方式，也有一些隐患问题，就是换行被解析。也就是说，标签之间换行之后，显示出来的效果中间是存在间隙的，并且不同浏览器之间的间隙大小不一致。此外，IE6、IE7是不支持块级元素的inline-block效果。那么有其他办法可以解决吗？这就是本节需要讨论的问题了。
浮动原理
任何元素都可以被浮动，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框位置；由于浮动框不在文档流中，所以文档流中的元素会表现得就像浮动框不存在一样。文档流是文档中可显示对象在排列时所占用的位置。话不多说，看例子最直观：
例3：
无标题文档
div1
：