任务3.4 采用CSS浮动属性进行网页布局.pptxVIP

任务3.4采用CSS浮动属性进行网页布局;任务介绍;任务分析;元素的浮动属性float;【课堂练习3.4-1】制作网页，添加三个块元素，使块元素水平显示，如图

1、我们知道块元素都是独占一行的，首先在制作三个div元素，默认是标准流布局效果;如果想让盒子水平排列，我们要给标签添加float浮动属性

2、当给box-1添加左浮动后，如图3.4-1（b）所示，box-1脱离标准流向左移动，由于box-1浮动，它将不占空间，box-2自然上移，被box-1覆盖，所以box-2在视图中消失。如果想box-2显示出来，那么就给box-2也添加浮动，并且排到box-1后面，效果如图效果如图3.4-1（c）所示，;3、如果所有盒子的横向排列，就三个盒子都左浮动，效果如图3.4-1（d）所示.

4、盒子的位置是由结构中标签的顺序决定的，如果程序修改一下效果如图3.4-3（e）所示

;浮动盒子如果想居中必须嵌入到一个无浮动效果的盒子中，父盒子居中，子盒子跟随居中。;【课堂练习】针对课堂练习3.1-1继续讨论，页面所有元素均已向左浮动，在box-3后面再增加一个没有设置浮动的块级元素box-4，未清除浮动时的状态如图3.4-2(a)所示，清除浮动后的状态如图3.4-2(b)所示。

;清除浮动;overflow属性;使用清除浮动，是该方法只适用于IE8及以上版本浏览器和其他非IE浏览器;如果当前盒子在浮动盒子后面，如果不需要浮动就会发生位置变形，如果需要他在浮动盒子下面，一定要进行取消浮动设置，即clear。