浮动65课件讲解.pptxVIP

浮动;标准文档流排版

定位排版

浮动排版;浮动排版的特点;在CSS中，通过float属性来设置浮动，其基本语法格式如下：

float常用的属性值有三个，其含义为：

left：盒子向左浮动。

right：盒子向右浮动。

none：盒子不浮动，该值为默认值。

;课堂案例;按标准文档流排列;依次设置三个图片所在的div向左浮动;当浏览器窗口缩小，横向宽度容纳不下div3时：;右浮动示例;1、当浮动元素脱离文档流后，相邻元素位置变化，容易使网页变得面目全非

2、对子元素设置浮动时，如果不对其父元素定义高度，则子元素的浮动会对父元素产生影响。;子元素浮动后对父元素的影响;如图所示，受到3个子元素左浮动的影响，未设置高度的父元素减小为一行文本的高度，可以看出父元素不能自适应子元素的高度。

思考：如何清除浮动产生的影响？;在CSS中，我们使用clear属性清除浮动，其基本语法格式如下：

常用的clear属性值及含义为：

left：清除左侧浮动的影响。

right：清除右侧浮动的影响。

none：不清除浮动，该值为默认值。

both：同时清除左右两侧浮动的影响。

;方法一：使用空标签清除浮动;运行结果;第一步：整体规划页面，确定页面版心宽度，即主要内容所在的区域，一般范围在1000-1200px；

第二步：确定页面包括哪些div模块，以及模块与模块之间并列关系、嵌套关系。如页面头部、导航栏、内容区、页面底部等。

第三步：采用盒子模型+css技术布局网页各个模块

第四步：在各个模块中填充相应的内容。