第14章盒子的浮动与定位分析
浮动与定位解析
CSS 定位与浮动 CSS允许任何元素浮动float，不论是图像，段落还是列表。
无论先前元素是什么状态，浮动后都成为块级元素。
浮动元素的宽度缺省为auto。
浮动有一系列控制它的规则。
1.浮动元素的外边缘不会超过其父元素的内边缘。
2.浮动元素不会互相重叠。
3.浮动元素不会上下浮动。
4.如果一个浮动元素在另一个浮动元素之后显示，而且会超出容纳块，则它下降到低于先前任何浮动元素的位置。
说简单点就是没有空间的话，就另起一行。
CSS 定位机制 CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。
也就是说，普通流中的元素的位置由元素在 (XHTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。
可以使用水平内边距、边框和外边距调整它们的间距。
但是，垂直内边距、边框和外边距不影响行内框的高度。
由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。
不过，设置行高可以增加这个框的高度。
CSS position 属性通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。
position 属性值的含义：static 元素框正常生成。
块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative 元素框偏移某个距离。
元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute 元素框从文档流完全删除，并相对于其包含块定位。
包含块可能是文档中的另一个元素或者是初始包含块。
元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。
元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
网页布局的三种方式-标准流、浮动和定位
⽹页布局的三种⽅式-标准流、浮动和定位⽹页布局的三种⽅式⽹页布局的本质——⽤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图⽚和⽂字的浮动效果，所以不会出现浮动元素盖住⽂字的情况出现。
⼆、如果多个盒⼦都设置了浮动，则它们会按照属性值⼀⾏内显⽰并且顶端对齐排列例如三个在同⼀个⽗盒⼦下的⼦盒⼦，都设置左浮动例如在同⼀个⽗盒⼦下的两个⼦盒⼦分别设置左浮动和右浮动注意：浮动的元素是互相贴靠在⼀起的（不会有缝隙），如果⽗级宽度装不下这些浮动的盒⼦，多出的盒⼦会另起⼀⾏对齐三、浮动元素会具有⾏内块元素特性任何元素都可以浮动。
浮动与定位
1.浮动(float)在div+css中浮动分为左浮动右浮动和清除浮动。
①右浮动（float：right）指一个块元素向右移动，并且空出自己左边的位置，让给其他元素，直到碰到包含该块元素的边框为止。
②左浮动（float：left）指一个块元素向左移动，让出它右面的空间，让别的块元素显示。
如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素”卡住”。
并且只从它下一行的右下角往后排！③清除浮动（clear：left；clear：right；clear：both）如果不希望别的元素在某个元素的左边后者右边，可以使用清除浮动的方式。
2.浮动对块元素和行内元素都有效，并且只有在浮动的情况下，浏览器才解析行内元素的宽和高。
3.定位(position) 常见的定位有4种①static（默认的）Left 和top 属性对static 定位的元素不生效。
Static 是靠margin-left 和margin-top 进行定位的②relative 相对定位所谓相对定位是相对于该元素原先所在位置的左上角定位的，虽然它脱离了标准流，但是它原先的位置不会被占据。
代码#spe{Position:relative;Left:40px;Top:100px;}③absolute 绝对定位绝对定位是指：以包含该元素且脱离了标准流的元素为基础定位的，但是如果没有父元素（或有父元素，但父元素没有脱离标准流），则相对于body左上角定位。
④fixed 固定定位所谓fixed定位，指的是不管怎样，总是以视窗左上角为基准定位。
4.z-index 用于设置对象（div）显示的时候的层叠顺序。
.cls{z-index：#;}#=1 2 3 4 数字越小，对象越在下边。
postion:relative是子块级元素面向父级元素的相对定位，定位关键字使用left/right/top/bottom，而float:right/left是子块级元素流集合面向父级元素的定位，定位的关键词使用margin/padding。
浮动定位
１.1 标准流(文档流)块级元素独占一行显示标准流的显示方式元素默认的显示方式就是标准流。
１.2 浮动用法：Float:left| right特点：☞设置了浮动的元素不占原来的位置（脱标）☞可以让块级元素在一行上显示☞浮动可以行内元素转化为行内块元素模式转换的过程中，能用display就用display 作用：☞浮动用来解决文字图片环绕问题☞制作导航栏☞网页布局１.3 清除浮动☞清除浮动不是删除浮动☞清除浮动指的是清除浮动的影响注意：当子元素设置了浮动，父元素没有高度的时候，造成页面布局混乱。
这种情况下进行清除浮动。
１.4 清除浮动的几种方式☞使用clear:left| right | bothClear:both;在要清除浮动的元素后面添加一个标签☞给父盒子设置overflow:hidden如果父盒子中有定位的元素，一般不推荐使用该种方式清除浮动。
☞使用伪元素清除浮动１.5 Overflow的使用☞hidden 将超出部分进行隐藏☞auto如果内容超出盒子，那么给盒子设置滚动条，如果内容没有超出盒子，那么不显示滚动条。
☞scorll２定位方位名称：Left，right ，top, bottom２.1 静态定位（static）用法：Position：static静态定位就是元素标准流的显示方式。
２.2 绝对定位（absolute）看脸型用法：Position：absolute;特点：☞当给一个单独的元素设置绝对定位，以浏览器左上角（body）为基准设置定位的。
☞当盒子发生嵌套关系的时候，如果父盒子没有设置定位，子盒子设置定位以浏览器左上角为基准设置定位。
☞当盒子发生嵌套关系的时候，如果父盒子设置定位，子盒子设置定位父盒子左上角为基准设置定位。
☞给盒子设置了绝对定位，该盒子不占位置（脱标）☞给行内元素设置绝对定位后，该元素转化为了行内块元素注意：元素设置了绝对定位后，通过具体的方位名称可以随便设置元素的位置。
盒子的浮动与定位
准备页面 14-01.htm
未设置浮动，完全按标准流显示
父div 子div 子div 子div 子p
设置第1个浮动的div
.son1{ float:left; }
box-2左边框与box-1左边框重合，因为box-1已经脱离标准流，标准流中的 box-2会顶到box-1的位置，而文字会环绕box-1排列
盒子的
postion
static：这是默认的属性值，也就是该盒子按照标准流（包 括浮动方式）进行布局。 relative：相对定位，使用相对定位的盒子以标准流方式进 行排版，然后使盒子相对于原位置偏移指定的距离。相对 定位的盒子仍在标准流中，占用其原有位置。 absolute：绝对定位，盒子的位置以他的包含框为基准进行 偏移。该盒子从标准流中脱离，其他盒子就好象这个盒子 不存在一样。 fixed：固定定位，和绝对定位类似，只是以浏览器窗口为 基准进行定位，也就是当拖动浏览器窗口滚动条时，依然 保持对象位置不变。
改变浮动方向
14-05.htm
将box-3的float设置为right
如果将浏览器调整变窄，box-3将会被挤到下一行中，但 仍然保持向右浮动。
调整浮动对象 14-06.htm
box-1保持向左，box-3左浮动，box-2右浮动。
将来浏览器窗口变窄，box-3先被挤入下一行，这是按照 HTML书写顺序来决定的。
扩展盒子高度
box-1、2、3均浮动，父div中无文字段落，父div范围缩 为一条。 14-08a.htm
一个div的范围是由它里边的标准流内容决定的，与里边 的浮动内容无关。 要让父div包含3个浮动盒子，可以在3个浮动div后增加一 个div实现。 14-08.htm .father .clear{
浮动定位的概念和作用
浮动定位的概念和作用
一、概念
浮动定位是一种CSS布局技术，它通过设置元素的float属性来实现元素在页面上的浮动效果。
浮动可以使元素向左或向右移动，直到它碰到父级元素的边界或另一个浮动元素。
二、作用
1.实现文字环绕效果
通过设置元素的float属性，可以让元素沿着容器边缘浮动，实现文字环绕效果。
例如，将图像设置为浮动，文本就会环绕在图像周围，形成图文混排的效果。
2.实现网页布局的多样化
通过将元素设置为浮动，可以让元素按照不同的方向排列，实现更加灵活的网页布局。
例如，可以将一组按钮设置为浮动排列，形成水平导航条。
3.方便地实现定位和排版
使用浮动定位可以方便地将元素定位到页面的特定位置，并且可以轻松地调整它们的顺序和位置。
此外，还可以使用clear属性来清除浮动，防止元素重叠。
4.快速排版
使用浮动定位可以快速地将文本和图片等元素排列在一起，实现快速排版。
这对于制作宣传册、海报等需要快速排版的任务非常有用。
盒子的定位和布局
盒⼦的定位和布局⼀、基本概念（⼀）视觉格式化模型1. 视觉格式化模型（visual formatting model）：CSS的⼀种机制，它规定了页⾯中的多个盒⼦如何布局2. css的⼀种机制，视觉格式化模型属于css范畴3. 多个盒⼦如何布局，中的每个HTML元素都会在页⾯盒⼦中⽣成4. 这些盒⼦如何排列、如何相互影响，由视觉格式化模型定义5. 视觉格式化模型是⼀套⾮常复杂的机制，包含错综复杂的CSS规范6. 本章的课程从实⽤的⾓度出发，仅学习在划分页⾯区域的时候需要的核⼼知识7. 由于划分页⾯区域时⼏乎都使⽤的是块盒，因此，本章仍然只涉及块盒（⼆）视⼝1. 视⼝（viewport）：可视窗⼝，通常指浏览器的可视区域2. 视⼝的尺⼨仅受到浏览器可视窗⼝⼤⼩的影响，和内容⽆关3. 当⽹页内容的尺⼨超过视⼝尺⼨时，浏览器会出现滚动条（三）包含块1. 包含块（containing block）：每个元素都有⼀个包含块，它是指元素在页⾯中摆放的区域2. 通常情况下，元素的包含块是它⽗元素的内容盒（content-box）3. 包含块：初始化包含块（initial containing block）初始化包含块是浏览器在渲染前⾃动⽣成的⼀块区域4. 包含块（containing block）：每个元素都有⼀个包含块，它是指元素在页⾯中摆放的区域5. 通常情况下，元素的包含块是它⽗元素的内容盒（content-box）6. 根元素的包含块是初始化包含块（initial containing block）⼆、定位体系概述（⼀）什么是定位体系1. 视觉格式化模型规定，定位体系⼀共有三种：常规流（normal flow）浮动（float）绝对定位（absolute positioned）2. 任何⼀个元素，必须属于其中⼀种定位体系3. 不同的定位体系中，元素在包含块中的尺⼨和位置会有⼀些差异（⼆）定位体系判定1. position是⼀个CSS属性，默认值为static2. float是⼀个CSS属性默认值为none三、盒模型的定位体系1．定位体系影响盒模型等于最终盒⼦尺⼨；定位体系等于盒⼦尺⼨2．盒模型中的尺⼨：margin：px、em、%、auto；border：px、em；padding：px、em、%；width：px、em、%、auto；height：px、em、%、auto 3．尺⼨为设定的值，与定位体系⽆关4．尺⼨是包含块尺⼨的百分⽐，margin、padding、width的百分⽐：是包含块宽度的百分⽐；height的百分⽐（很少使⽤）5．尺⼨受到定位体系的影响6．不同的定位体系，auto的计算规则不⼀样四、常规流（⼀）常规流1. 常规流，⼜叫做普通流、⽂档流、普通⽂档流2. 常规流是最常见的定位体系，所有元素默认状态下都是常规流定位（⼆）盒模型中的auto值1. 常规流盒⼦⽔平⽅向上的尺⼨，必须等于包含块的宽度2. margin为auto：0px；height为auto：适应内容的⾼度3. ⽔平⽅向：常规流盒⼦⽔平⽅向上的尺⼨，必须等于包含块的宽度，如果不⾏，则强⾏将margin-right设置为auto4. 垂直⽅向：margin为auto：0px；height为auto：适应内容的⾼度五、盒⼦位置1. 盒⼦在包含块的垂直⽅向上依次摆放，盒⼦在包含块的垂直⽅向上依次摆放。
第14章 DIV+CSS布局基础
14.2.5 边框
边框是页面元素可视范围的最外圈。 边框是页面元素可视范围的最外圈。边框包围的范围包 括页面元素的补白和内容。 括页面元素的补白和内容。CSS中提供以下三个设置边框的 中提供以下三个设置边框的 属性： 属性： 1．边框样式 ．边框样式border-style 参数： 参数： none : 无边框。与任何指定的 无边框。与任何指定的border-width值无关 值无关 hidden : 隐藏边框。IE不支持 隐藏边框。 不支持 dotted : 在MAC平台上 平台上IE4+与WINDOWS和UNIX平台上 平台上 与 和 平台上 IE5.5+为点线。否则为实线 为点线。 为点线 dashed : 在MAC平台上 平台上IE4+与WINDOWS和UNIX平台上 平台上 与 和 平台上 IE5.5+为虚线。否则为实线 为虚线。 为虚线 solid : 实线边框 double : 双线边框。两条单线与其间隔的和等于指定的 双线边框。 border-width值 值 groove : 根据 根据border-color的值画 凹槽 的值画3D凹槽 的值画 ridge : 根据 根据border-color的值画菱形边框 的值画菱形边框 inset : 根据 根据border-color的值画 凹边 的值画3D凹边 的值画 的值画3D凸边 outset : 根据 根据border-color的值画 凸边 的值画
块级元素和行内元素的区别
排列方式 块级元素 垂直排列 可控制属性 高度、行高以及上 下边距都可控制 宽度 其宽度默认情况下与其父 元素一致。可以设置width 属性改变其宽度。 宽度就是其包含的文字或 者图片的宽度，设置width 属性不生效。
行内元素
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
14.2.1 静态定位 14.2.2 相对定位
1．实验1——一个子块的情况
图14.17 一个div设置为相对定位后的效果
图14.18 以右侧和下侧为基准设置相对定位
2．实验2——两个子块的情况
图14.19 设置为相对定位前的效果
图14.20 两个兄弟div之一设置为相对定位后的效果
3．结论
14.1.9 实验8——扩展盒子的高度
图14.14 包含浮动div的容器将不会适应高度
图14.15 希望实现的效果
14.2 盒子的定位
（1）广义的“定位”：要将某个元素 放 到某个位置的时候，这个动作可以称为定位 操作，可以使用任何CSS规则来实现，这就 是泛指的一个网页排版中的定位操作，使用 传统的表格排版时，同样存在定位的问题。
第14章 盒子的浮动与定位
14.1
盒子的浮动
14.2
盒子的定位
14.1 盒子的浮动 14.1.1 准备代码
图14.1 没有设置浮动时的效果
14.1.2 实验1——设置第1个浮动的div
图14.2 设置第1个div浮动时的效果
14.1.3 实验2——设置第2个浮动的div
图14.3 设置前两个div浮动时的效果
图14.24 将中间的div设置为绝对定位后的效果
图14.25 设置偏移量后的效果
图14.26 将父块设置为“包含块”后的效果
对于绝对定位的正确描述如下。
● 使用绝对定位的盒子以它的“最近”
一个“已经定位”的“祖先元素”为基准进 行偏
移。 如果没有已经定位的祖先元素，那么会
以浏览器窗口为基准进行定位。
相对定位的盒子仍在标准流中，它后面 的盒子仍以标准流方式对待它。
● absolute：绝对定位，盒子的位置 以它的包含框为基准进行偏移。绝对定位的 盒子从标准流中脱离。
这意味着它们对其后的兄弟盒子的定位 没有影响，其他的盒子就好像这个盒子不存 在一样。
● fixed：称为固定定位，它和绝对 定位类似，只是以浏览器窗口为基准进行定 位，也就是当拖动浏览器窗口的滚动条时， 依然保持对象位置不变。
下面是两条关于“相对定位”的定位原 则。
（1）使用相对定位的盒子，会相对于 它在原本的位置，通过偏移指定的距离，到 达新的位置。
（2）使用相对定位的盒子仍在标准流 中，它对父块和兄弟盒子没有任何影响。
14.2.3 绝对定位
1．准备网页代码 2．案例——使用绝对定位
图14.23 设置绝对定位前的效果
14.1.7 实验6——全部向左浮动
图14.9 设置3个div浮动时的效果
图14.10 div挤倒下一行被卡住时的效果
14.1.8 实验7——使用clear属性清除浮动的影响
图14.11 设置浮动后文字环绕的效果
图14.12 清除浮动对左侧影响后的效果
图14.13 清除浮动对右侧影响后的效果
（2）狭义的“定位”：在CSS中有一 个 非常重要的属性position，这个单词翻译为 中文也是定位的意思。
然而要使用CSS进行定位操作并不仅仅 通过这个属性来实现，因此不要把二者混淆。
● static：静态定位，这是默认的属 性值，也就是该盒子按照标准流（包括浮动 方式）进行布局。
● relative：相对定位，使用相对定 位的盒子的位置常以标准流的排版方式为基 础，然后使盒子相对于它在原本的标准位置 偏移指定的距离。
● 绝对定位的框从标准流中脱离，这 意味着它们对其后的兄弟盒子的定位没有影 响，其他的盒子就好像这个盒子不存在一样。
在上述的第一条原则中，有3个带引号 的定语，需要进行一些解释。
（1）关于“最近”，在一个节点的所 有 祖先节点中，找出所有“已经定位”的元素， 其中距离该节点最近的一个节点，父亲比祖 父近，祖父比曾祖父近，以此类推，“最近” 的就是要找的定位基准。
（2）所谓“已经定位”元素的含义是，
position属性被设置，并且被设置为不 是 static的任意一种方式，那么该元素 就被定义 为“已经定位”的元素。
（3）关于“祖先”元素，如果结合本 章
最前面介绍的“DOM树”的知识，就可以理 解
了。
从任意节点开始，走到根节点，经过的 所有节点都是它的祖先，其中直接上级节点
是它的父亲，以此类推。
14.3 z-index 空间位置
• z-index可正、负整数和零 • z-index属性用调整重叠块的上下关系，大
的位于上面，小的位于下面。 • 当块被设置了的position属性时，z-index
属性才起作用。
14.1.4 实验3——设置第3个浮动的div
图14.4 设置第3个div浮动时的效果
14.1.5 实验4——改变浮动的方向
图14.5 改变浮动方向后的效果
图14.6 div被挤到下一Байду номын сангаас时的效果
14.1.6 实验5——再次改变浮动的方向
图14.7 交换div位置时的效果
图14.8 div被挤到下一行的效果