下载文档原格式
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）为基准设置定位的。
☞当盒子发生嵌套关系的时候，如果父盒子没有设置定位，子盒子设置定位以浏览器左上角为基准设置定位。
☞当盒子发生嵌套关系的时候，如果父盒子设置定位，子盒子设置定位父盒子左上角为基准设置定位。
☞给盒子设置了绝对定位，该盒子不占位置（脱标）☞给行内元素设置绝对定位后，该元素转化为了行内块元素注意：元素设置了绝对定位后，通过具体的方位名称可以随便设置元素的位置。
浮动定位的概念和作用
一、概念
浮动定位是一种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. 盒⼦在包含块的垂直⽅向上依次摆放，盒⼦在包含块的垂直⽅向上依次摆放。
CSS系列：CSS中盒子的浮动与定位1. 盒子的浮动在标准流中，一个块级元素在水平方向会自动伸展，知道包含它的元素的边接；而在竖直方向与相邻元素依次排列，不能并排。
CSS中float属性，默认为none。
将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧。
同时默认情况下，盒子的宽度不再伸展，而是根据盒子里面的内容的宽度来决定。
float: left;可以使用clear来清除浮动：clear: left | right | both;2. 盒子的定位在CSS中有一个position属性，用来进行定位操作。
position属性可以设置为4个属性值之一：◊ static：默认的属性值，该盒子按照标准流（包括浮动方式）进行布局；◊ relative：相对定位，使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。
相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。
◊ absolute：绝对定位，盒子的位置以它的包含框为基准进行偏移。
绝对定位的盒子从标准流中脱离。
它对其后的相邻盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。
◊ fixed：固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位，当拖动浏览器的滚动条时，依然保持对象位置不变。
2.1 staticstatic为默认值，表示块保持在原本的位置上，不会有任何移动的效果。
没有设置任何position属性相当于使用static方式。
2.2 relative使用relative相对定位，除了将position属性设置为relative之外，还需要指定一定的偏移量，水平方向通过left或者right属性来指定，竖直方向通过top或bottom来指定。
<!DOCTYPE html><html><head><title></title><style type="text/css">.relative {position: relative;top: 20px;left: 20px;width: 500px;}</style></head><body><div class="relative">Position相对偏移</div></body></html>在上面的示例中，.relative若不设置width，则由于block元素会自动伸展到宽度与父元素相同，且加上left的20px，则在浏览器中预览时，会出现横向滚动条。
