Web前端入门学习（5）——浮动原理及清除浮动

浮动原理及清除浮动

上节回顾

  在上节的《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

    div2

    span1     span2

---

显示结果：

本例的结果和例2的结果，代码区别在于把display:inline-block改成float:left，而显示结果的区别是标签换行没有被解析。还有一些特点现在通过肉眼还无法看出来，就是使用float属性的元素会脱离文档流，现在看看下面例子：

例4：

    

---

显示结果：

从例4可以看出，红色块盒子使用了left浮动，而蓝色块盒子没有使用浮动元素，因此红色块脱离了文档流，而蓝色块盒子好像看不到红色块盒子一样，重叠在一起了。

综上所得，总结出浮动元素的几个特征：

• 内联元素支持宽高；

• 块元素可以在同行显示；
  

• 宽度由内容撑开；

• 脱离文档流；

• 提升层级半层。

  
  

  了解了浮动原理之后，我们知道使用float属性的元素会脱离文档流，那么其他没有使用浮动属性的元素会看不到它们，从而导致出现重叠这种状况，如何解决呢？那么现在就引入一个清除浮动的知识点了。

  例5：

在例4的代码中，把box2的样式改成：

.box2{ width:200px;height:200px;background:blue;clear:left;}

---

显示结果：

属性clear把红色块盒子的左浮动清除了，所以蓝色块盒子不再和红色盒子重叠在一起。这里仅是简单介绍清除浮动的办法之一，当然还有很多办法，在此仅作入门了解。

  

---

 温馨提示：

          float浮动属性值：left/right/none；

          clear清除浮动属性值：left/right/both/none。