CSS3浮动与定位

深入理解css布局之定位与浮动在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。

今天我们来深入学习一下css布局相关的知识。

上篇文章我们讲完了css布局中盒模型和元素分类的相关知识，同时介绍了box-sizing和行框。

这篇我们继续...一、定位与浮动上篇我们讲解了不同类型元素的特点，我们可以随意的排列组合他们来达到我们想要的效果。

但是他们都是基于一个二维平面的，如果我们想在布局中有遮挡，重叠之类的更丰富效果，我们就需要使用到定位和浮动的相关知识。

1.1 文档流文档流就是按照页面元素书写的顺序，将页面元素按从左到右，从上至下的一般顺序进行排列。

那么也就可以理解成我们刚才所说的一个二维平面的概念。

那么如果我想要实现更丰富的效果，就需要脱离文档流，在一个新的平面上去显示，这样我们就可以在屏幕上有多个平面叠加显示的效果了，那么这就是浮动和定位的工作了。

1.2 定位定位允许你使用position 属性，将一个元素相对于他自己或者他的祖先元素甚至是浏览器窗口通过 top , left , right , bottom 属性进行偏移。

根据position 属性的取值，元素可以分为静态定位元素static （默认值）、相对定位元素relative、绝对定位元素absoute和固定定位元素fixed。

首先我们抛开static这个默认值，因为他基本不属于定位的范畴，因为元素默认就是static，他就相当于是依据文档流显示。

当我们使用定位时，需要position属性和top,left,right,bottom 这两类属性共同参与来决定一个元素的定位类型和偏移量。

使用方法很简单，这里说下他们之间的区别:•relative相对定位•元素根据其在当前文档流所在位置作为参考系，进行偏移。

•定位之后原来元素在文档流中的位置会被空出来，不会被其他元素所占据。

•absolute绝对定位•元素会将其带有position为非static的祖先元素作为参考系进行偏移。

css三⼤模块：盒⼦模型、浮动、定位⼀、盒⼦模型把HTML页⾯中的元素看作是⼀个矩形的盒⼦（装内容的容器），每个矩形都由元素的内容、内边距padding、边框border和外边距margin 组成。

看下⾯的代码：<style>.box{width: 200px;height: 200px;float: left;padding: 100px;margin: 100px;border: 50px solid orangered;background-color: bisque;}</style><div class="box"></div>代码效果如下：浏览器下的效果在Chrome的开发者⼯具中 box的⼆维分析图盒⼦模型⼀般分为两种：IE盒模型（⼜称怪异盒模型）和标准盒模型css3中可以通过box-sizing来指定盒模型，如下：标准盒模型：box-sizing: content-box; /*盒⼦⼤⼩为：width+padding+border*/IE盒模型：box-sizing: border-box; /*盒⼦⼤⼩为：width 即padding和border是包含到width⾥⾯的*/代码如下：<style>div{width: 200px;height: 200px;float: left;padding: 100px;margin: 100px;border: 50px solid orangered;background-color: bisque;}.box1{box-sizing: content-box; /*盒⼦⼤⼩为：width+padding+border*/}.box2{box-sizing: border-box; /*盒⼦⼤⼩为：width 即padding和border是包含到width⾥⾯的*/}</style><div class="box1">box1</div><div class="box2">box2</div>两种盒模型效果图如下（box1为标准盒模型、box2为IE盒模型）：浏览器下的效果在Chrome的开发者⼯具中两个盒⼦的⼆维分析图⽹页布局的本质：把⽹页元素（⽂字、图⽚等），放⼊到盒⼦⾥⾯，然后利⽤css摆放盒⼦的过程。

盒⼦属性，浮动，定位1.盒⼦常见属性1）容器盒⼦Box-size:设置盒⼦模型，CSS3标准，content-box:正常默认模式，起源于⾕歌，元素的整体⼤⼩会被内边距和边框撑开border-box：怪异模式，起源于IE，元素的整体⼤⼩不会被内边距和边框撑开Width:宽度Height:⾼度注意：width,height会根据box-size盒⼦模型的不同来决定是内容的宽度和⾼度，还是整个元素⼤⼩的宽度和⾼度。

2）Padding:内边距Padding-left,padding-right,padding-top,padding-bottomPadding:上右下左;Padding:上右下；左边距等于右边距Padding:上右；下跟上边⼀样，左跟右⼀样3）Margin:外边距外边距跟内边距⼀致。

但是两个元素的外边距会重叠。

4）Border:边框语法：border: 边框宽度边框样式颜⾊;可以分开设置，例如border-width: 30px;border-style: dashed;border-color: purple;分别设置上下左右边框，例如border-bottom:50px dotted green;5）Box-shadow:盒⼦阴影box-shadow: 阴影的⽔平偏移值阴影的垂直偏移值阴影的模糊度阴影的颜⾊;6）Display:设置盒⼦是块级元素还是⾏级元素还是弹性元素Block:块级元素，会占据⼀整⾏，有宽⾼，div,h1,p,li,ul...Line-block:⾏块元素，不会占据⼀整⾏，有宽⾼,img...Line:⾏元素，不会占据⼀整⾏，也没有宽⾼,a,span...7）Border-radius:边框的圆⾓8）Background:设置元素的背景，背景图⽚，背景颜⾊Background:是⼀个综合性的属性，可以分出背景颜⾊，背景图⽚，背景是否重复，背景图⽚的位置，背景图⽚的⼤⼩Background-position:设置背景图⽚的位置，left,right,top,bottom,center,百分⽐⼀般可以设置2值，第⼀个值是设置⽔平位置，第⼆个值设置垂直位置Background-size:设置背景图⽚的⼤⼩，注意：有时候不知道图⽚的确切⽐例的时候，只需要设置⼀个宽度或者⾼度，另外⼀个值设置为auto即可。

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`。

传智播客《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定位与浮动的知识点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）浮动可以使元素脱离文档的普通流，向左或向右移动，直到碰到包含它的容器边界或其他浮动元素为止。

2、CSS定位属性的取值：
☆overflow属性的取值：
vertical-align
z-index
3、CSS浮动：
(1)、float属性：
float 属性定义元素在哪个方向浮动。

以往这个属性总应用于图像，使文本围绕在图像周围，不过在CSS 中，任何元素都可以浮动。

浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

(3)、clear属性：
clear 属性规定元素的哪一侧不允许其他浮动元素。

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。

CSS布局之绝对定位和浮动的区别CSS布局之绝对定位和浮动的区别在CSS中，实现分栏布局有两种⽅法。

第⼀种⽅法是使⽤四种CSS定位选项(absolute 、static、relative和fixed)中的绝对定位(absolute positioning)，它可以将⽂档中的某个元素从其原本位置上移除，并重新定位在期望的任何地点之上。

第⼆种则是使⽤CSS中的浮动(float)概念。

绝对定位或浮动都能够⽤来实现分栏效果。

⼆者可以独⽴使⽤，也可以结合在⼀起，相辅相成。

1、绝对定位绝对定位的优势在于，我们可以丝毫不差地精确控制任何元素的位置—这⾥⾯没有什么需要猜测或者运⽓的成分。

由于应⽤了绝对定位的元素被不留痕迹地从常规⽂档流中完全移除，所以它也不会为其他元素带来任何的影响。

那么让我们试⼀试⽤绝对定位如何实现下⾯的布局。

这是⼀个三栏的布局，并且是居中显⽰的。

其中，A栏是主体内容栏，B栏和C栏都是侧边栏。

⾸先，我们不可能直接⽤绝对定位将A、B、C三栏定位到居中的位置，因为每个⼈显⽰器的分辨率是不同的，在1024X768分辨率的显⽰器上定位的居中效果，在别的分辨率的显⽰器上看到的效果肯定不会是居中显⽰的，那么，该如何解决这个问题呢?幸好，在绝对定位模型中有个极为有⽤的特性，那就是：若某个绝对定位元素的容器也被定位过，那么该元素指定的top和left值将不会基于⽂档的根元素html(也就是浏览器窗⼝的左上⾓)计算，⽽是会基于其容器的左上⾓计算这个偏移量。

换句话说，也就是：被定位过的容器将扮演其中所有元素绝对定位起始点的⾓⾊。

所以，利⽤这个特性，我们给A、B、C栏的外部加上⼀个容器D，如下图：然后，我们让容器D居中，并给它加上⼀个属性：position:relative，这样，再⽤绝对定位定位A、B、C的top和left值，A、B、C的位置就会基于容器D的左上⾓的位置来计算了，这样就可以实现我们期望的三栏居中的效果了。

css浮动，绝对，相对定位浮动float:属性{ float:none; 默认值，对象，不漂浮 float:left; ⽂本流向对象的右边 float:right;};清除浮动clear:属性{ clear:none; 允许对象两遍都可以浮动 clear:left; 不允许左边有浮动 clear:right; 不允许右边有浮动 clear:both; 两遍都不允许有浮动};定位position:属性{ position:static; 静态定位 position:fixed; 固定定位 position:absolute;　绝对定位 position:relative; 相对定位};绝对定位（absulote）:将对象从⽂档流中拖出使⽤left,rigt,top,bottom属性,相对于最接近得⼀个具有定位设置的⽗对象，进⾏绝对定位，如果不存在这样的⽗对象，则依据body对象。

绝对定位对象可层叠，层叠顺序可通过z-index 属性控制，z-index值为⽆单位的整数，⼤的在最上⾯，可以有负值（⽬前负值FF不⽀持）。

相对定位 ( relative ) :对象不可层叠，但是，left,right,top,bottom,这些属性在正常⽂档流中偏移位置。

同样可以⽤z-index分层设计。

定位的形象解释(1) 绝对定位(absolute)如果使⽤决定定位，绝对定位对象会让出⾃⼰原先占⽤位置，它是贡献的。

如果之前没有对⽗元素定位，那么⼦元素位置不会受⽗元素位置影响，⽗元素怎么移动，⼦元素还是在原来的位置，⾄于⼦元素要在哪个位置，则以html(body左上⾓)上⾓为准,⽤left，right，top，bottom 值来定位，但是如果⽗元素也给出了定位设置(通常是相对定位)，此时⼦元素的位置就没有那么⾃由了，尽管此时⼦元素改变位置了也不会影响⽗元素(⽂本流)，但它还是要遵循⽗元素的话，⽗元素会告诉它"你可以活动，但应该在我的范围内⾛动，⽐⽅说我要你在我左上⽅1⽶处，你就要跟死这⼀点，我⾛你也要跟着⾛",课件绝对定位的对象参考⽬标是它的⽗极。