教学课件任务03-1：网页的蓝图--复杂布局--浮动布局两栏式页面.pptxVIP

教材配套资源页完整PPT课件 教学课件任务03-1：网页的蓝图--复杂布局--浮动布局两栏式页面 1 项目03 网页的蓝图—复杂布局 任务3-1 浮动布局两栏式页面 2 任务3-1 浮动布局两栏式页面 知识点 理解浮动布局 掌握浮动属性float的用法 掌握清除浮动属性clear的用法 技能点 能够熟练应用浮动属性完成图文混排效果 能够清除页面排版中浮动对其它元素的影响 3 一、认识浮动 元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 三个盒子全部浮动 4 二、元素的浮动属性float 用法： 选择器{float:属性值;} 常用的float属性值有三个： left：元素向左浮动 right:元素向右浮动 none:元素不浮动（默认值） 5 2.1 不设置浮动 在默认标准流模式下，html文档中的元素就像“流水”按照排列次序依次在页面中出现，所有元素的float属性值未经设置都取其默认值none。 head meta charset=utf-8 titlefloat/title style type=text/css .box01,.box02,.box03{height:50px; padding: 10px; margin: 10px;} .box01{ background: