网页制作6浮动与定位

⽹页布局的三种⽅式-标准流、浮动和定位⽹页布局的三种⽅式⽹页布局的本质——⽤CSS 来摆放盒⼦。

把盒⼦摆放到相应位置CSS 提供了三种传统布局⽅式(简单说,就是盒⼦如何进⾏排列顺序)：普通流（标准流）浮动定位标准流标准流定义所谓的标准流:，就是标签按照规定好默认⽅式排列1. 块级元素会独占⼀⾏，从上向下顺序排列。

常⽤元素：div、hr、p、h1~h6、ul、ol、dl、form、table2. ⾏内元素会按照顺序，从左到右顺序排列，碰到⽗元素边缘则⾃动换⾏常⽤元素：span、a、i、em 等以上都是标准流布局，标准流是最基本的布局⽅式。

浮动浮动定义浮动最典型的应⽤：可以让多个块级元素⼀⾏内排列显⽰。

⽹页布局第⼀准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

float 属性⽤于创建浮动框，将其移动到⼀边，直到左边缘或右边缘触及包含块或另⼀个浮动框的边缘。

语法：选择器{ float: 属性值; }属性值：值描述left元素向左浮动。

right元素向右浮动。

none默认值。

元素不浮动，并会显⽰在其在⽂本中出现的位置。

inherit规定应该从⽗元素继承 float 属性的值。

浮动特性⼀、脱离标准普通流的控制（浮）移动到指定位置（动）, （俗称脱标），且浮动的盒⼦不再保留原先的位置如同其名字的意义⼀样，浮动，即浮动到元素上⽅，可以这样来理解：标准流在最底层，浮动的元素在标准流的上⽅，即脱离了标准流的控制。

同时它位于标准流的上层，所以标准流⾥不会再存在它的位置。

但也会有特殊的情况，即⽂字和浮动元素位于同⼀个⽗元素⾥时，浮动元素不会盖住⽂字，⽽是环绕⽂字，这是因为浮动设计的初衷就是类似word图⽚和⽂字的浮动效果，所以不会出现浮动元素盖住⽂字的情况出现。

⼆、如果多个盒⼦都设置了浮动，则它们会按照属性值⼀⾏内显⽰并且顶端对齐排列例如三个在同⼀个⽗盒⼦下的⼦盒⼦，都设置左浮动例如在同⼀个⽗盒⼦下的两个⼦盒⼦分别设置左浮动和右浮动注意：浮动的元素是互相贴靠在⼀起的（不会有缝隙），如果⽗级宽度装不下这些浮动的盒⼦，多出的盒⼦会另起⼀⾏对齐三、浮动元素会具有⾏内块元素特性任何元素都可以浮动。

浮动布局和定位布局一、网页元素的三种位置方式普通流：不浮动、定位，前面做的那些网页浮动：用float样式的网页定位相对定位绝对定位固定定位二、浮动布局浮动现象的特点（1）浮动元素只能水平地向左或向右浮动，不可能斜向上或斜向下浮动。

（2）浮动元素离开了普通流。

浮动元素之后的块状元素将忽略它并占据它原来的空间。

行内元素（文字）会围绕在浮动元素周围。

（3）如果不希望浮动元素对后面的元素产生影响，可以为后面的元素应用“clear”属性，如果为清理元素设置“margin-top”属性，该属性不起作用。

因此应避免为清理元素设置“margin-top”属性（4）如果让一个元素浮动，它会向左或者向右浮动直至遇到父元素的边缘。

如果向同一方向再浮动一个元素，它会浮动直至遇到前一个浮动元素的边缘（5）如果向同一方向浮动多个元素，它们将一个挨一个排列，当水平空间无法容纳更多的浮动元素时，浮动元素会换行排列（6）应该为浮动元素设定宽度。

如果不设定宽度，浮动元素有宽度最小化的趋势，在不同的浏览器中会有不同的显示效果（自适应）（7）浮动元素的边距（如margin-top、margin-bottom）不会重叠，而普通流中的元素会出现重叠父元素不能包含浮动的子元素的处理办法迫使父元素包含子元素的方法：方法一：为父元素设置overflow：hidden: 。

对于IE6浏览器需要为父元素设置zoom: 1 方法二：利用一个子元素清除浮动（clear方法）二、定位布局定义：定位是指通过选取适合的参照物，并设置left 或right、top 或bottom 属性，来确定元素在网页中的位置（1）相对定位①position: relative;②相对定位是指元素相对于它的原始位置定位③相对定位元素仍然保留它在文档流中的原始位置④如果不设置宽度，相对定位元素的宽度保持原来大小⑤绝对定位是指元素相对于最近的已定位的祖先元素定位。

如果不存在已定位的祖先元素，则相对于浏览器视口定位（2）绝对定位①绝对定位是指元素相对于最近的已定位的祖先元素定位。

网页设计浮动知识点一、什么是浮动？在网页设计中，浮动（float）是指将元素从其正常的布局位置移动到一个新的位置。

通过使用浮动，可以实现元素在页面上的自由定位，使页面的布局更加灵活。

二、浮动的用途1. 实现多列布局：通过浮动元素可以将网页分为多个列，实现多列布局，常用于构建网页的导航栏、侧边栏等。

2. 图片与文本的排列：通过浮动图片或文本，可以实现图片与文本并排显示，使页面内容更加美观。

3. 创建悬浮效果：通过浮动元素，并设置一定的位置偏移，可以实现元素悬浮在页面上方，如悬浮菜单、悬浮广告等。

三、浮动的属性在CSS中，可以使用float属性来设置元素的浮动状态。

float属性有以下取值：1. left：元素向左浮动。

2. right：元素向右浮动。

3. none：元素不浮动，恢复到正常的布局。

四、浮动的清除当元素进行浮动后，可能会对后续元素的布局产生影响，此时需要对浮动进行清除，使后续元素不受浮动的影响。

常用的浮动清除方法有以下几种：1. clear属性：可以在需要清除浮动的元素上添加clear属性，取值为left、right或both，表示清除左浮动、右浮动或全部浮动。

示例代码：```css.clearfix {clear: both;}```2. 使用空元素清除浮动：可以在浮动元素的末尾添加一个空元素，并设置clear属性为both，使其成为一个空的块级元素，起到清除浮动的作用。

示例代码：```html<div class="clearfix"></div><style>.clearfix {clear: both;height: 0;visibility: hidden;}</style>```3. 使用伪元素清除浮动：可以使用伪元素:before或:after来清除浮动，将清除浮动的样式应用到父元素上。

示例代码：```css.clearfix::after {content: "";display: block;clear: both;}```五、浮动的注意事项1. 父元素高度塌陷：当子元素浮动后，父元素的高度会丧失，导致父元素无法正常撑开，解决方法可以使用浮动清除或者添加额外的清除元素。

传智播客《HTML5+CSS3网站设计基础教程》教学设计课程名称：HTML5+CSS3网站设计基础教程授课年级：2016年级授课学期：2016学年第一学期教师姓名：某某老师1201 年月日课题名称第6章浮动与定位计划课时8课时内容分析通过前面几章的学习，初学者不难发现，在默认情况下，网页中的元素会按照从上到下或从左到右的顺序一一罗列。

如果仅仅按照这种默认的方式进行布局，网页将会显得单调、混乱。

为了使网页的布局更加丰富、合理，可以在CSS中对元素设置浮动和定位属性。

本章将对元素的浮动和定位进行详细讲解。

教学目标●理解元素的浮动，能够为元素设置浮动样式。

●熟悉清除浮动的方法，可以使用不同方法清除浮动。

●掌握元素的定位，能够为元素设置常见的定位模式。

重点及措施教学重点：元素的浮动属性float、运用clear属性清除浮动、运用overflow属性清除浮动、使用after伪对象清除浮动、overflow属性、元素的定位属性。

措施：通过上机操作加强学习和补充案例进行巩固。

难点及措施教学难点：元素的浮动属性float、overflow属性、元素的定位属性。

措施：通过上机操作加强学习和补充案例进行巩固。

教学方式教学采用教师课堂讲授为主，使用教学PPT讲解。

教学过程第一课时（讲解元素的浮动属性float、清除浮动）复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习第五章“CSS盒子模型”的相关知识。

1、一个盒子的宽（width）和高（height）均为300px，左内边距为30px，同时盒子有3px的边框，请问这个盒子的总宽度是多少？（）A、333pxB、366pxC、336pxD、363px答案：C●盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和；●所以，盒子的总宽度= width（300px）+左内边距（30px）+左右边框宽度之和（3px*2）=336px；说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。

CSS布局中float和position属性使用技巧2010-09-02 11:18 52css 我要评论(0)字号：T | T在进行CSS网页布局时，对元素与容器进行布置与规划，最常用的两个属性就是浮动float和定位position，本文向大家描述一下这两个属性的用法。

AD：你对CSS布局中浮动float和定位position属性的使用是否熟悉，这两个属性的理解对CSS网页布局的学习非常重要，这里和大家分享一下。

CSS布局最常用属性float（浮动）和position（定位）在进行CSS网页布局时，对元素与容器进行布置与规划，最常用的两个属性就是浮动float和定位position。

这两个属性的理解对CSS网页布局的学习非常重要。

我们就这两个属性的相关知识与实例，发布本文，希望对您的工作学习有帮助。

首先了解float（浮动）和position（定位）属性的基础知识：float（浮动）属性：float:none|left|right◆取值：none:默认值。

对象不飘浮left:文本流向对象的右边right:文本流向对象的左边float（浮动）属性的一个实例（一行两列）：ExampleSourceCodexhtml代码:1.<divid divid="wrap">2.<divid divid="column1">这里是第一列</div>3.<divid divid="column2">这里是第二列</div>4.<divclass divclass="clear"></div>5.<!--元素需要清除浮动但可能与Web标准意图相背-->6.</div>CSS代码:1.#wrap{width:100px;margin:0auto;}2.#column1{float:left;width:40px;}3.#column2{float:right;width:60px;}4..clear{clear:both;}5.position（定位）属性：position:static|absolute|fixed|relative◆取值：◆static:默认值。

网页设计基础浮动及定位教学案例-网页设计论文-设计论文——文章均为WORD文档，下载后可直接编辑使用亦可打印——摘要：浮动与定位是《网页设计基础》课程中一个教学难点，为此，笔者以任务为导向，将任务层层分解，化繁为简，从而更好地让学生理解并掌握知识点。

关键词：HTML；浮动；定位1背景本教学单元的教学模式为项目导入、任务驱动和过程管理。

以网项目，贯穿到整个教学过程中，然后将整个项目进行分解，以任务为驱动，并在教学过程中，借鉴IT企业项目管理模式，对整个教学过程进行监控，确保完成教学目标。

2教学案例呈现2.1教学目标本次教学的知识目标要求学生掌握浮动、浮动塌陷、定位和浮动与定位的综合运用，重点是浮动与定位，难点是浮动塌陷以及浮动与定位的综合运用；能力目标要求学生具备相应的专业能力、方法能力和社会能力：在专业能力方面，具备web前端静态页面开发能力；在方法能力方面，具备对知识归纳的能力；在社会能力方面，具备有效地时间管理和准确的自我评价的能力。

素质目标要求学生具备积极的工作态度、团队合作能力。

从学生认知、能力结构和心理特征来看，当前大多数学生理解盒子模型和默认标准文档流，并能熟练运用，整体学习信心高昂，团体意识较强。

因此，为了实现本次教学目标，制定了课前预习作业；课中上机任务，并按学生水平采用分层教学；课后，布置课后作业，巩固知识。

2.2教学内容《网页设计基础》属于软件技术专业大一阶段的核心职业技术基础课程，是后续Web开发课程的基础前导课程。

本教学单元的学习任务是在前次教学单元完成的网页面的基础上，运用浮动和定位制作网商品详情页面。

地位：浮动与定位是本次教学单元重点与难点，是后期进行网页布局的核心基础知识点。

作用：浮动实现块级元素横向布局，定位实现页面元素精确定位。

前后联系：浮动与定位是对前驱知识的提升，后驱网页布局知识的核心。

选取理由：本次学习任务是浮动和定位综合运用，以任务驱动，让学生边做边学。

CSS浮动与定位的高级知识点CSS中的浮动（float）和定位（position）是布局和定位元素的两种重要技术，掌握它们的高级知识点能够更好地运用它们实现网页设计中的各种效果和布局。

本文将介绍CSS浮动与定位的高级知识点，包括浮动和定位的基本原理、常见的使用场景以及注意事项。

通过学习本文，读者将更好地理解和运用CSS中浮动和定位的技术。

一、浮动（float）技术1. 基本原理浮动是CSS中一种布局方式，可以实现元素（通常是块级元素）的水平排列。

元素通过设置float属性为left或right来进行浮动。

浮动元素不再占据正常文档流的位置，而是根据其浮动方向向父元素的左侧或右侧靠拢。

2. 清除浮动在使用浮动布局时，经常会遇到浮动元素引起的父元素高度塌陷的问题。

为了解决这个问题，可以使用清除浮动的技术。

其中，常用的清除浮动的方法包括：使用空元素清除浮动、使用伪元素清除浮动和使用clear属性清除浮动。

3. 浮动与文本流浮动元素通过浮动脱离正常文档流，但仍然会影响周围的文本流。

为了控制文字绕排的方式，可以使用CSS中的clear属性，通过设置clear属性，使得元素在浮动元素下方开始。

4. 浮动与宽度当浮动元素宽度超过其父元素宽度时，会自动换行显示，而不会超出父元素的范围。

这是因为浮动元素会尽量占据自身所需的宽度，并自动溢出到下一行。

二、定位（position）技术1. 定位的基本原理定位是CSS中一种精确布局元素的方式。

通过设置元素的position 属性以及top、right、bottom和left属性，可以将元素定位到指定的位置。

常用的position属性值包括：static、relative、absolute和fixed。

2. 相对定位（relative）相对定位是相对于元素在文档流中的原始位置进行定位，即在正常文档流中占据原来的空间。

通过设置top、right、bottom和left属性的值来调整元素的位置。

浮动定位的概念和作用
一、概念
浮动定位是一种CSS布局技术，它通过设置元素的float属性来实现元素在页面上的浮动效果。

浮动可以使元素向左或向右移动，直到它碰到父级元素的边界或另一个浮动元素。

二、作用
1.实现文字环绕效果
通过设置元素的float属性，可以让元素沿着容器边缘浮动，实现文字环绕效果。

例如，将图像设置为浮动，文本就会环绕在图像周围，形成图文混排的效果。

2.实现网页布局的多样化
通过将元素设置为浮动，可以让元素按照不同的方向排列，实现更加灵活的网页布局。

例如，可以将一组按钮设置为浮动排列，形成水平导航条。

3.方便地实现定位和排版
使用浮动定位可以方便地将元素定位到页面的特定位置，并且可以轻松地调整它们的顺序和位置。

此外，还可以使用clear属性来清除浮动，防止元素重叠。

4.快速排版
使用浮动定位可以快速地将文本和图片等元素排列在一起，实现快速排版。

这对于制作宣传册、海报等需要快速排版的任务非常有用。

CSS浮动与定位灵活控制元素的位置CSS是一种用于样式化网页内容的标记语言，其中的浮动和定位是页面布局的重要组成部分。

通过使用浮动和定位，我们可以实现对元素位置的灵活控制。

本文将介绍CSS中浮动和定位的基本概念、应用场景以及使用方法。

一、浮动浮动是一种CSS属性，用于指定元素在页面中的位置。

通过将元素浮动到屏幕的左侧或右侧，我们可以实现多个元素的并排显示。

1. 浮动的基本概念在CSS中，通过设置元素的`float`属性为`left`或`right`来实现浮动。

例如，设置`float: left;`可以将元素浮动到屏幕的左侧。

2. 浮动的应用场景浮动常用于实现网页的多栏布局。

通过将导航栏、侧边栏和内容区域进行浮动，可以实现这种布局效果。

3. 浮动的使用方法要使用浮动来控制元素的位置，需要遵循以下步骤：（1）在HTML中，给需要浮动的元素添加一个class或id属性，用于在CSS中选择该元素。

（2）在CSS中，通过选择器选中需要浮动的元素，并设置`float`属性的值为`left`或`right`。

（3）根据需要，设置元素的宽度、高度以及其他样式属性。

二、定位定位是一种通过CSS属性来精确定位元素的方法。

与浮动不同，定位可以将元素放置在页面的任意位置。

1. 定位的基本概念在CSS中，常用的定位方式包括相对定位（`position: relative;`）、绝对定位（`position: absolute;`）和固定定位（`position: fixed;`）。

这些属性可以用于设置元素的位置。

2. 定位的应用场景定位常用于实现网页的特殊效果，如悬浮菜单、弹出窗口等。

通过使用不同的定位方式，我们可以将元素放置在页面的任意位置。

3. 定位的使用方法要使用定位来控制元素的位置，需要遵循以下步骤：（1）在HTML中，给需要定位的元素添加一个class或id属性，用于在CSS中选择该元素。

（2）在CSS中，通过选择器选中需要定位的元素，并设置`position`属性的值为`relative`、`absolute`或`fixed`。

CSS定位与浮动的知识点CSS（层叠样式表）是一种用于描述网页样式和布局的语言。

在CSS中，定位和浮动是两个重要的概念，它们能够帮助我们对网页元素进行位置控制和布局调整。

本文将详细介绍CSS中定位与浮动的知识点。

一、定位（Positioning）定位可以让我们精确地控制网页元素的位置。

在CSS中，常用的定位方式有相对定位（Relative）、绝对定位（Absolute）、固定定位（Fixed）和粘性定位（Sticky）。

1. 相对定位（Relative）相对定位是相对于元素原本所在的位置进行定位。

使用相对定位后，元素仍然占据原来的空间，并且可以通过top、bottom、left和right属性相对移动。

相对定位的元素不会对其他元素造成影响。

示例代码：```cssdiv {position: relative;left: 50px;top: 20px;}```2. 绝对定位（Absolute）绝对定位是相对于离它最近的已定位祖先元素进行定位。

如果没有已定位的祖先元素，那么它将相对于文档的根元素（即body）进行定位。

绝对定位的元素脱离了文档的普通流，不占据空间。

示例代码：```cssdiv {position: absolute;left: 100px;top: 50px;}```3. 固定定位（Fixed）固定定位是相对于浏览器窗口进行定位，无论页面滚动与否，元素始终停留在设置的位置。

常用于创建固定的导航栏或广告栏等元素。

示例代码：```cssdiv {position: fixed;right: 20px;bottom: 30px;}```4. 粘性定位（Sticky）粘性定位是相对定位和固定定位的结合。

当元素在容器中可见时，它的行为类似于相对定位，当元素滚动到容器外时，行为类似于固定定位。

粘性定位需要设置位置属性和至少一个偏移属性。

示例代码：```cssdiv {position: sticky;top: 50px;}```二、浮动（Floating）浮动可以使元素脱离文档的普通流，向左或向右移动，直到碰到包含它的容器边界或其他浮动元素为止。

CSS 定位和浮动CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

定位的基本思想很简单，它允许定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

显然，这个功能非常强大，也很让人吃惊。

要知道，用户代理对CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。

另一方面，CSS1 中首次提出了浮动，它以Netscape 在Web 发展初期增加的一个功能为基础。

浮动不完全是定位，不过，它当然也不是正常流布局。

我们会在后面的章节中明确浮动的含义。

一切皆为框div、h1 或p 元素常常被称为块级元素。

这意味着这些元素显示为一块内容，即“块框”。

与之相反，span 和strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。

可以使用display 属性改变生成的框的类型。

这意味着，通过将display 属性设置为block，可以让行内元素（比如元素）表现得像块级元素一样。

还可以通过把display 设置为none，让生成的元素根本没有框。

这样的话，该框及其所有内容就不再显示，不占用文档中的空间。

但是在一种情况下，即使没有进行显式定义，也会创建块级元素。

这种情况发生在把一些文本添加到一个块级元素（比如div）的开头。

即使没有把这些文本定义为段落，它也会被当作段落对待：外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

外边距合并外边距合并（叠加）是一个相当简单的概念。

但是，在实践中对网页进行布局时，它会造成许多混淆。

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

CSS布局之浮动（float）和定位（position）属性的区别CSS 布局 - position 属性position 属性规定应⽤于元素的定位⽅法的类型（static、relative、fixed、absolute 或 sticky）。

position 属性position 属性规定应⽤于元素的定位⽅法的类型。

有五个不同的位置值：staticrelativefixedabsolutesticky元素其实是使⽤ top、bottom、left 和 right 属性定位的。

但是，除⾮⾸先设置了 position 属性，否则这些属性将不起作⽤。

根据不同的 position 值，它们的⼯作⽅式也不同。

CSS 布局 - 浮动和清除float 属性float 属性⽤于定位和格式化内容，例如让图像向左浮动到容器中的⽂本那⾥。

float 属性可以设置以下值之⼀：left - 元素浮动到其容器的左侧right - 元素浮动在其容器的右侧none - 元素不会浮动（将显⽰在⽂本中刚出现的位置）。

默认值。

inherit - 元素继承其⽗级的 float 值最简单的⽤法是，float 属性可实现（报纸上）⽂字包围图⽚的效果。

float: left|right; 可以⾃动排列⾃动折⾏, 但需要clear来配合清除浮动;display: inline-block 有些时候可以替代float实现相同的效果.position: absolute|relative; 要配合top,left等定位;使⽤：position: absolute会导致元素脱离⽂档流，被定位的元素等于在⽂档中不占据任何位置，在另⼀个层呈现，可以设置z-index。

PS的图层效果就是position: absolute。

float也会导致元素脱离⽂档流，但还在⽂档或容器中占据位置，把⽂档流和其它float元素向左或向右挤，并可能导致换⾏。

图⽚的⽂字环绕布局效果就是float。

web浮动与定位实验总结Web浮动与定位是前端开发中非常重要的概念，它们可以帮助我们实现页面布局的灵活性和多样性。

本文将对Web浮动与定位进行实验总结，并探讨它们的应用场景和使用技巧。

一、浮动（float）的使用浮动是CSS中常用的布局方式之一，它可以使元素脱离文档流并向左或向右移动，其他元素会围绕它进行排列。

在实际开发中，我们经常使用浮动来实现多栏布局、图文混排等效果。

1. 浮动的基本语法在CSS中，我们可以通过设置元素的float属性来实现浮动效果。

float属性的值可以是left、right或none。

当设置为left时，元素会向左浮动；当设置为right时，元素会向右浮动；当设置为none 时，元素不会浮动。

2. 浮动的应用场景浮动常用于实现多栏布局。

我们可以将页面分为多个栏目，每个栏目使用浮动来进行布局。

通过设置不同的浮动方向和宽度，可以实现不同栏目的排列效果。

3. 浮动的注意事项在使用浮动时，需要注意以下几点：（1）浮动元素会脱离文档流，可能会影响其他元素的布局，需要通过清除浮动来解决这个问题。

（2）浮动元素的父元素的高度会塌陷，可以通过触发BFC（块级格式化上下文）来解决这个问题。

（3）浮动元素的宽度默认为其内容的宽度，可以通过设置宽度来改变浮动元素的宽度。

二、定位（position）的使用定位是CSS中控制元素位置的一种方式，通过设置元素的position 属性和top、bottom、left、right属性，可以精确地控制元素的位置。

1. 定位的基本语法在CSS中，我们可以通过设置元素的position属性来实现定位效果。

position属性的值可以是static、relative、absolute或fixed。

其中，static为默认值，表示元素的位置由正常文档流决定；relative表示相对定位，元素相对于其正常位置进行定位；absolute表示绝对定位，元素相对于其最近的非static定位的父元素进行定位；fixed表示固定定位，元素相对于浏览器窗口进行定位。

教师学科教案[ 20 – 20 学年度第__学期]任教学科：_____________任教年级：_____________任教老师：_____________xx市实验学校传智播客《HTML5+CSS3网站设计基础教程》教学设计课程名称：HTML5+CSS3网站设计基础教程授课年级：2016年级授课学期：2016学年第一学期教师姓名：某某老师201 年月日教学过程第一课时（讲解元素的浮动属性float、清除浮动）复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习第五章“CSS盒子模型”的相关知识。

1、一个盒子的宽（width）和高（height）均为300px，左内边距为30px，同时盒子有3px的边框，请问这个盒子的总宽度是多少？（）A、333pxB、366pxC、336pxD、363px答案：C●盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和；●所以，盒子的总宽度= width（300px）+左内边距（30px）+左右边框宽度之和（3px*2）=336px；说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。

本课时内容学习✧分组讨论对新课进行讲解前，先让学生分组讨论以下问题：初学者在设计一个页面时，通常会按照默认的排版方式，将页面中的元素从上到下一一罗列，这样的布局制作出来的页面看起来呆板、不美观。

其实，通过元素“浮动”可以使页面中的元素按照左、中、右的结构进行排版。

那么，什么是“元素的浮动”，以及如何设置元素的浮动呢？请小组代表对以上问题发表见解。

教师对上述问题进行解释：●所谓元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中相应位置的过程。

在CSS中，通过float属性来定义浮动，其基本语法格式如下：选择器{float:属性值;}●在上面的语法中，常用的float属性值有三个：left、right、none。

绝对定位与相对定位和浮动的区别与运用
绝对定位和浮动的区别和运用
1. 绝对定位的本身是与文档流无关，他的定位是从浏览器的左上方或者父级开始计算的。

因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存在时一样。

所以他可以覆盖页面上的其他元素。

2.浮动元素的定位还是基于正常的文档流，然后从文档流抽出并尽可能远的移动至左侧或者右侧。

文字内容会围绕在浮动元素周围。

它只是改变了文档流的显示，而没有脱离文档流。

绝对定位与相对定位
1.absolute，绝对定位的框与文档流无关，所以他们可以覆盖页面上的其他元素并可以通过z-index来控制它的层级次序。

z-index的值越高，它显示的越在上层。

2.relative,对一个元素进行相对定位，首先它出现在它所在的位置上。

然后通过设置垂直或水平位置，让这个元素“相对于”它的原始起点进行移动。

（相对定位时，无论是否进行移动，元素仍然占据原来的空间。

因此，移动元素会导致它覆盖其他框）
3.父元素相对定位。

子元素绝对定位。

这样子子元素的位置不在相对浏览器左上角，而是相对于父级窗口的左上角。

4.相对和绝对需要配合top/ right/ bottom/left来定位具体位置，这四个属性只有在该元素使用定位后才生效，其他情况无效。

6种布局+rem布局1、固定布局固定布局是第⼀次做移动端的朋友们最好的选择⽅式，思路沿⽤PC端，上⼿⽐较快。

<head>⾥把viewport加好，然后设想整个⽹页的宽度为320px即可。

其他地⽅PC端怎么布局，这⾥类似即可。

缺点也显⽽易见，⼤屏⼿机显⽰⽹页⽐较宽，⽽固定布局宽度参照永远是320px，导致左右两边会有空⽩。

就像你⽤27⼨显⽰器看980px宽度⽹页⼀样。

另⼀个⽅⾯就是⼿机横屏的时候，两边空⽩更宽。

2、流动布局以前PC端很少⽤到这种布局，因为我们需求要么⽹页就⼀种宽度，要么就两种宽度，分宽窄屏处理。

⽽⼿机上不同，⼤部份⼿机默认宽度都不⼀样，所以流动布局可以很好解决⾃适应需求。

流动布局重点就是使⽤百分⽐来代替传统px作为单位（当前容器宽度除以⽗级容器实际宽度）。

例如设计稿宽度为640px，上⾯有⼀个导航⾥包含四个菜单，四周边距为20px，四个菜单等宽，那么边距应该为20px/640px=3.125%，每个菜单的宽度为100%/4=25%。

DEMO⾥还有边框，所以记得改变盒⼦模型，加box-sizing:border-box。

优点是⽆论⽹页宽度如何改变，四个菜单的宽度永远⼀样，并且等宽。

缺点是不够灵活，如果菜单数量有变化，就满⾜不了了。

3、浮动布局很多乐观的⼈，看到Flexbox最新⼀版的规范，满⼼欢喜的觉得移动端可以不⽤浮动布局了。

但很遗憾，对于Android 2.3⽀持的Flexbox⽼规范，连最简单的多⾏商品按顺序排列，都实现不了。

对于这种情况，我喜欢⽤传统的浮动⽅式。

因为对于开发⼈员，这种循环是最简单的。

再加上:nth-child伪类处理边距，⼲脆利落。

所以，我并没有放弃浮动布局。

当然，因为不需要兼容⽼版本IE了，浮动的写法也变得简单许多。

.clearfix{ content:""; display:table; clear:both;}我在Less的公共代码库⾥，也加了这个：.clearfix(){ &:after{ content:""; display:table; clear:both; }}需要清除浮动，直接写.clearfix()即可。