摘要：
　　这是艺灵带你轻松学会div+css的第九节课：css浮动和清除浮动。这节主要讲网页中浮动布局的使用场景及浮动产生的副作用如何处理，最后列出清理浮动的几种方法利弊......

第九节：css浮动和清除浮动

1、引出浮动

在昨天的课程中，我们对网页进行了结构划分并顺利用代码实现了大致轮廓布局。但在实际过程中，一个网页的布局复杂度远超过昨天的布局！举个最简单的例子：很多网站主体部分又左右块，配图：　那么此时我们又要怎么实现呢？

光靠我们之前讲的知识点是无法完成这个布局的，所以我们这节会讲一个新的知识点，主要就是来解决这个问题的。

1.1、浮动应用

浮动，在我们的布局中是很重要也是经常用到的一个属性，该属性主要解决：块对象同行显示的布局问题。

我们还是一边讲一边做案例吧。

出题：一个名为.box的div里面有两个小的div，行两个小div分别命名为：.left、.right，现要求两个小的div在同一行显示。

同学们，一起来动手做题吧！

1.1.1、html代码

<div class="box">
　<div class="left">名为left的小div</div>
　<div class="right">名为right的小div</div>
</div>

为了更直观的看到效果，我们来添加一个边框属性。

1.1.2、添加边框属性

div{
　border: 1px solid #f00;/*边框=宽1像素，实线，红色*/
}

预览后的效果配图：　此时我们可以看到名为.left和名为.right的两个div并没有在同一行显示，为什么呢？

可能会有同学说没有设置宽度，那我们就来设置宽度看下效果。

1.1.3、添加宽度属性

.left{
　width:190px;/*宽度=190像素*/
}
.right{
　width:300px;/*宽度=300像素*/
}

运行后配图：　从图中可以看到，虽然设置了宽度，但还是在两行显示。是不是很奇怪？？？

不在同一行的原因：div是一个块对象，块对象的特征就是单独占领一行！
解决方法：通常使用浮动！

1.2、浮动属性

通过手册，我们可以看到这个浮动属性的代码是：float，取值有三个，分别是：
none：默认值。对象不飘浮；
left：文本流向对象的右边；
right：文本流向对象的左边

1.3、使用浮动

我们直接给.left和.right都添加一个浮动看下效果吧。

1.3.1、添加浮动

.left,.right{
　float:left;/*浮动=向左浮动*/
}

此时的效果如图：　怎么样，都在同一行显示了吧！有没有发现一个问题？

1.4、问题：.box这个div怎么看不到高度了

有没有发现这个问题？如果没有，配对比图一张：　是不是很奇怪？刚解决了一个问题，结果又出了一个新的问题，而且还不知道原因是什么......

其实，很多时候都是这样。我们在解决问题的时候，一个解决了，结果有副作用了。比如说这个浮动，由于现在有边框，所以副作用相当明显。特别强调一点：元素浮动后，该元素后面的块对象或父级在某些情况下会受一定的影响！所以要及时进行清除浮动！

1.4、解决方法：清除浮动

清除浮动对应的属性是：clear，取值有四个。分别是：
none：默认值。允许两边都可以有浮动对象；
；left：不允许左边有浮动对象
；right：不允许右边有浮动对象
；both：不允许有浮动对象

1.5、使用clear清除浮动

很多同学们都喜欢添加一个新标签的方法来解决这个问题，此处也不例外。思路：我们先定义一个名为.clear的选择符，然后设置清除活动，最后在.right的后面添加新标签进行清除浮动。

1.5.1、clear

.clear{
　clear:both;/*清除浮动=全部清除*/
　border:0;/*去除前面设置的边框*/
}

1.5.2、html清除浮动

<div class="box">
　<div class="left">名为left的小div</div>
　<div class="right">名为right的小div</div>
　<div class="clear"><!--这个是用来清除浮动的--></div>
</div>

此时我们再刷新前台页面，即可看到副作用已经没有了，配图：　然后再调整下宽度及右间距就可以了。

1.6、小结

我们先来总结下这节课已学到的内容及知识点吧！
块对象如何在同一行显示？解决方法：添加浮动
添加浮动后的副作用怎么处理？解决方法：清除浮动！

对于float浮动而言，还可以使用float:right等方法来实现块对象在同一行显示，同学们在下面可以尝试下。不要只满足于课堂中讲的这点知识，毕竟每节课的时间是有限的，将重点讲到便达到了目的。

对于清除浮动，下面会列出几种不同的方法，有兴趣的同学可以尝试下。

1.7、常用清除浮动方法利弊分析

清除浮动方法一：设置父级高度
利：简单，写css时直接带过；
弊：对于内容高度不确定的容器来说，固定高度会显示不完预期内容！配图：　

1.7.1、相关代码

/*清除浮动方法一：设置父级高度*/
.box{
　height:300px;/*高度=300像素*/
}

小窗演示：如果想看全屏效果,点此进入demo全屏界面

清除浮动方法二：设置父级溢出隐藏
利：可以解决方法一的弊端；
弊：如果子级超出父级，则不会显示！例如：阴影。配图：　

1.7.2、相关代码

/*清除浮动方法二：设置父级溢出隐藏*/
.box{
　overflow:hidden;/*溢出隐藏*/
}

小窗演示：如果想看全屏效果,点此进入demo全屏界面

------以下内容续于2016-06-01 21:39------

清除浮动方法三：添加空标签
利：可以解决方法一和方法二的弊端；
弊：多添加一个空标签而已，但如果浮动多的话，页面中会多出很多无用的空标签，浪费代码。

示例代码见上面的1.5。小窗演示：如果想看全屏效果,点此进入demo全屏界面

清除浮动方法四：伪对象
利：解决前三种方法的弊端；
弊：暂无。

1.7.4、相关代码

/*清除浮动方法四：伪对象*/
/*css*/
.clearfix{*zoom:1;/*兼容ie6~ie7*/}
.clearfix:after{content:"";clear:both;display:table;height:0;font-size:0;overflow:hidden}
<!--html-->
<div class="box clearfix">
　<div class="left">名为left的小div</div>
　<div class="right">名为right的小div</div>
</div>

小窗演示：如果想看全屏效果,点此进入demo全屏界面

如果同学们想看这四种方法的源码，可以点击上面的demo页面，右键即可看到源码。我们强烈推荐使用方法四来清除我们的浮动，也希望同学们在以后学会运用。

2、录制视频

标题：艺灵带你轻松学会div+css09css浮动和清除浮动

视频备用地址：
淘宝：http://cloud.video.taobao.com/play/u/759415648/e/1/t/1/p/1/39034333.swf
优酷：http://player.youku.com/player.php/sid/XMTU3OTgzMzA3Ng==/v.swf
土豆：http://www.tudou.com/v/woLexn6Jf5o/v.swf
腾讯：http://static.video.qq.com/TPout.swf?vid=l0301efpjd2&auto=0

如果看官想看更多视频，可在优酷、土豆、腾讯视频中搜索下：艺灵设计哦~

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2016-05-31/406.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。